<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.