object-fit Scale Down

scale-down chooses the smaller of none or contain.

Preview

Code

<style>
.box{
width:200px;
height:140px;
background:#eee;
}

img{
width:100%;
height:100%;
object-fit:scale-down;
}
</style>

<div class="box">
<img src="https://via.placeholder.com/400x250">
</div>

More CSS object-fit Examples (8)