<div class="demo">
        <h2>Maintain Aspect Ratio #2</h2>

        <div class="grid">
          
            <div class="wrapper">
                <img class="img" src="http://via.placeholder.com/795x745">
            </div>
          
            <div class="wrapper">
                <img class="img" src="http://via.placeholder.com/985x357">
            </div>
          
            <div class="wrapper">
                <img class="img" src="http://via.placeholder.com/606x255">
            </div>
          
            <div class="wrapper">
                <img class="img" src="http://via.placeholder.com/697x418">
            </div>
          
        </div>
    </div>
.grid {
  display: flex;
  flex-wrap: wrap;
}

.demo {
  width: 80%;
  margin: auto;
}

.img {
  object-fit: cover;
  width: 320px;
  height: 180px;
  background: red;
  margin: 2px;
  
  &:nth-child(even) {
      object-fit: contain;
  }
}
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.