Question

考虑3个（或更多）图像，所有不同大小和宽高比都在固定宽度的div中（例如width:100%）：

<div class="image-row">
   <img src="1.png">
   <img src="2.png">
   <img src="3.png">
</div>

如何强制所有图像具有相同的高度和总宽度以填充容器的宽度（即如何制作整齐的图像行）？

我已尝试过flex或inline-block或nowrap的各种组合，以便与height:100%或object-fit一起正常工作，但似乎没有任何效果。我要么松开纵横比，要么削减部分图像，要么没有相同的高度。

在“英文伪代码”中，该过程听起来很简单 - 将每个分别重新缩放到单位高度，然后将其重新缩放为给定宽度的组，同时保持纵横比。 CSS有没有特定的步骤？

Answer 1

我认为将图像设置为背景图像可能会有所帮助。这样，您可以使用background-size:cover将不同大小的图像填充到相同的宽度/高度div中。我不相信，如果每张图像的宽高比不同，所有图像都可以保持相同的高度而不会切断部分。您还可以尝试调整每个图像的background-position以至少使图像居中在div中，或尝试编辑/裁剪照片，然后再使用相同的宽高比。否则，你必须妥协。

＆＃13;

img {
  width: 33%;
  height: 150px;
}

.content {
  width: 33%;
  display:inline-block;
  height:150px;
}

#left {
  background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg");
  background-size:cover;
 
}

#center {
  background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg");
  background-size:cover;
}

#right {
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg");
  background-size:cover;
}

＆＃13;

<div class="image-row">
  <div id = "left" class="content">
  </div>
  <div id = "center" class="content"> 
  </div>
  <div id = "right" class="content">
  </div>
</div>

＆＃13;

在固定宽度的行中安装不同尺寸的多个图像并调整高度

1 个答案: