在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>

Answer 2

VXp的图像响应代码非常适合获取相同高度的所有图像。

我甚至添加了一个宽图像，它也被转换为全高。

＆＃13;

＆＃13;

.row {
  display: flex;
  flex-wrap: wrap;
  float: left;
  margin-left: 8%;
  margin-right: 8%;
  height: 200px;
}

.row img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0px 2px;
}

＆＃13;

<div class="row">
  <img src="https://upload.wikimedia.org/wikipedia/en/1/10/The_Lego_Movie_poster.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/en/c/ca/The-cutter-movie.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/en/2/29/Legend-of-a-rabbit-movie-poster-2011-1020694984%2B%281%29.jpg">
  <img src="https://vignette.wikia.nocookie.net/disney/images/d/d7/Frozen_movie.jpg/revision/latest?cb=20131120182859">
  <img src="https://upload.wikimedia.org/wikipedia/en/a/ae/Pinkmovieposter.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/en/7/79/The_Faculty_movie_poster.jpg">
  <img src="https://i.stack.imgur.com/IpJ7Y.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;