<h2>Maintain Aspect Ratio #5</h2>
<p>Resize the window to see the effect.</p>
<div class="demo">
<div class="grid">
<picture class="wrapper">
<source media="(min-width: 800px)" srcset="https://via.placeholder.com/400x201">
<source media="(max-width: 799px)" srcset="https://i.pinimg.com/736x/02/d7/01/02d701b77a984a1b6cf970e6eb0468e1--teacup-maltipoo-maltipoo-puppies.jpg">
<img class="img" src="https://via.placeholder.com/870x747">
</picture>
<picture class="wrapper">
<source media="(min-width: 800px)" srcset="https://via.placeholder.com/423x742">
<source media="(max-width: 799px)" srcset="https://i.pinimg.com/736x/02/d7/01/02d701b77a984a1b6cf970e6eb0468e1--teacup-maltipoo-maltipoo-puppies.jpg">
<img class="img" src="https://via.placeholder.com/941x775">
</picture>
<picture class="wrapper">
<source media="(min-width: 800px)" srcset="https://via.placeholder.com/880x588">
<source media="(max-width: 799px)" srcset="https://i.pinimg.com/736x/02/d7/01/02d701b77a984a1b6cf970e6eb0468e1--teacup-maltipoo-maltipoo-puppies.jpg">
<img class="img" src="https://via.placeholder.com/783x521">
</picture>
<picture class="wrapper">
<source media="(min-width: 800px)" srcset="https://via.placeholder.com/635x816">
<source media="(max-width: 799px)" srcset="https://i.pinimg.com/736x/02/d7/01/02d701b77a984a1b6cf970e6eb0468e1--teacup-maltipoo-maltipoo-puppies.jpg">
<img class="img" src="https://via.placeholder.com/950x897">
</picture>
</div>
</div>
.demo {
width: 80%;
margin: auto;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.wrapper {
width: 320px;
height: 180px;;
margin: 2px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.img {
width: 100%;
height: auto;
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
margin: auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.