html - 在 CSS 中缩放时如何保持图像的宽度

Question

我试图在保持高度的同时并排放置一些图像。我试过这个:

.row {
  float: left;
  border: 3px solid red;
  margin-left: 8%;
  margin-right: 8%;
  display: inline-block;
}

.row img {
  width: 16%;
  height: auto;

}

这是它在网络上的显示方式:

我想让高度一样，你觉得我做错了什么？

Answer 1

重点是让图片响应:

.row {
  /*float: left;*/
  display: flex; /* displays the images inline */
  border: 3px solid red;
  margin-left: 8%;
  margin-right: 8%;
  /*display: inline-block;*/
}

.row img { /* responsiveness */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<div class="row">
  <img src="http://placehold.it/100x200" alt="">
  <img src="http://placehold.it/200x300" alt="">
  <img src="http://placehold.it/300x400" alt="">
</div>