Scale IMG with aspect ratio

by vovkasolovev

HTML

Scale IMG with aspect ratio by container:before padding
</h3>
<h4>30%</h4>
<div class="container scale scale30">
<img src="https://podhod.ru/img/share_image_podhod.jpg">
</div>
<h4>130%</h4>
<div class="container scale scale130">
<img src="https://podhod.ru/img/share_image_podhod.jpg">
</div>

<h3>
Default IMG scale
</h3>
<div class="container full">
<img src="https://podhod.ru/img/share_image_podhod.jpg">
</div>

<h3>
Wrong IMG scale, without inner :before
</h3>
<div class="container bounds">
<img src="https://podhod.ru/img/share_image_podhod.jpg">
</div>

CSS

.container {
background: #444;
overflow: hidden;
position: relative;
max-width:380px;
margin-bottom:30px;
line-height:0;
}

.container.scale:before {
content: '';
display: block;
}

.container.scale.scale30:before {
padding-top: 30%; 
}

.container.scale.scale130:before {
padding-top: 130%; 
}

.container.scale img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 50%;
}

.container.full img{
 width:100%
 }

.container.bounds{
height: 0;
padding: 30% 0 0 0;
}
.container.bounds img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 50%;
 }