[CSS Inline images] #draw images in one line with equal sizes #css

structure.html

<div class="photos-line">
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22860491_293564051135946_1431999210961502208_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/23347493_138848026766173_4147715403113562112_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/23498171_1512204415482005_7319427710441226240_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22802639_866024183566278_671520314278019072_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22857687_133137560679761_5651001970152964096_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22710622_149419199004478_4851274197734785024_n.jpg">
  </div>
</div>

styles.css

.photos-line {
  column-count: 6;
  column-gap: 1em;
}

.photos-line .photo {
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  height: 0;
}

.photos-line .photo img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}