时间戳

首页 > 解决方案 > 使用 css 填充包含水平图像数组的 div 的宽度

html - 使用 css 填充包含水平图像数组的 div 的宽度

问题描述

我有一个包含div多个不同宽度、高度一致的图像的容器。图像是水平排列的，它们之间没有间隙。

到目前为止我所拥有的：

#imageContainer {
  width: 80%;
  border: 1px solid blue;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#images {
  display: flex;
  width: 80%;
  position: relative !important;
  margin: 2px;
}
#imageContainer img {
  display: inline-block;
  position: relative;
  margin: 1px;
}
<div id="imageContainer">
  <div id="images">
    <img src="https://dummyimage.com/400x100/000/fff" alt="">
    <img src="https://dummyimage.com/320x100/000/fff" alt="">
    <img src="https://dummyimage.com/420x100/000/fff" alt="">
    <img src="https://dummyimage.com/540x100/000/fff" alt="">
  </div>
</div>

我希望所有图像都可以缩放以适合我的div，填充它，但我似乎无法找到可以使用多个图像执行此操作的位置。

我的问题基本上是这个，但也有缩放以适应。

标签： htmlcss

解决方案

除非你想在你的盒子里有一个间隙，否则你应该从内部#images容器中删除宽度/位置。要缩小图像，您可以添加一个min-width. 如果您希望图像不失真，请添加object-fit：

#imageContainer {
  width: 80%;
  border: 1px solid blue;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#images {
  display: flex;
  margin: 2px;
}
#imageContainer img {
  display: inline-block;
  position: relative;
  margin: 1px;
  /* Important bits: */
  min-width: 0;
  object-fit: contain;
}
<div id="imageContainer">
  <div id="images">
    <img src="https://dummyimage.com/400x100/000/fff" alt="">
    <img src="https://dummyimage.com/320x100/000/fff" alt="">
    <img src="https://dummyimage.com/420x100/000/fff" alt="">
    <img src="https://dummyimage.com/540x100/000/fff" alt="">
  </div>
</div>

（顺便说一句，使用left+居中transform会导致某些渲染引擎变得模糊。）

推荐阅读