如何缩放一行图像以适应容器宽度？答案

【问题标题】：How do I scale a row of images to fit container width?如何缩放一行图像以适应容器宽度？
【发布时间】：2015-02-07 07:48:44
【问题描述】：

我想显示一个图像网格，该网格会自动缩放以适应可用宽度。每行的图像数量是任意的，并且可用宽度可以随着用户重新调整窗口大小而变化。原始图像也可能具有不同的宽度，但需要以相同的宽度显示。我宁愿避免使用表格并需要 CSS-only 解决方案。我设想的 html 是这样的：

<div class='img-grid'>  <!-- one per page, typically fixed 70% of page width -->
  <!-- can be an arbitrary number of rows per grid -->
  <div class='row'>  <!-- width would be 100% of img-grid width -->
    <!-- can be an arbitrary number of images per row -->
    <div class='img-wrapper'>  <!-- wrapper needs to force images to same width -->
      <img class='image' src="test1.jpg"/>
    </div>
  </div>
</div>

似乎很简单，但我对在 4 个类中的每一个上使用什么 css 来强制图像具有相同宽度、缩放该宽度以使（任意数量的）图像适合行而不换行感到困惑并确保一切都随着浏览器窗口宽度的变化而重新缩放。

谢谢奈杰尔

【问题讨论】：

您是否使用任何框架，例如 bootstrap 或 zurb？
不，我不是，只是普通的 html 和 CSS。

标签： html css

【解决方案1】：

您可以使用 CSS 表格布局来做到这一点，请参见下面的演示。

JSFIDDLE DEMO

.row {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: top;
}
.item img {
  display: block;
  width: 100%;
  height: auto;
}

<div class="row">
  <div class="item">
    <img src="//dummyimage.com/100x100/aaa" />
  </div>
  <div class="item">
    <img src="//dummyimage.com/200x200/bbb" />
  </div>
  <div class="item">
    <img src="//dummyimage.com/300x300/ccc" />
  </div>
</div>

【讨论】：

【解决方案2】：

Flexbox 在您的场景中很有用：

将display:flex 添加到该行：和flex: 1 到行项目：

.img-grid { width: 70%; }
.row { width: 100%; display: flex; }
img { width: 100%;  }
.img-wrapper
{
    flex: 1;
}

<div class='img-grid'>  <!-- one per page, typically fixed 70% of page width -->
  <!-- can be an arbitrary number of rows per grid -->
  <div class='row'>  <!-- width would be 100% of img-grid width -->
    <!-- can be an arbitrary number of images per row -->
    <div class='img-wrapper'>
      <img class='image' src="http://placeimg.com/440/680/any"/>
    </div>
    <div class='img-wrapper'>
      <img class='image' src="http://placeimg.com/640/380/any"/>
    </div>
    <div class='img-wrapper'>
      <img class='image' src="http://placeimg.com/540/480/any"/>
    </div>
    <div class='img-wrapper'>
      <img class='image' src="http://placeimg.com/640/280/any"/>
    </div>
    <div class='img-wrapper'>
      <img class='image' src="http://placeimg.com/740/480/any"/>
    </div>  
  </div>
</div>

【讨论】：

Flex 工作得非常好，但是关于如何支持早期浏览器（例如 IE9）的任何想法。
对于 IE8-9，您可以使用 display:table-cell 对于 .img-wrapper，它不如 flexbox 完美，但做得很好

【解决方案3】：

演示 - http://jsfiddle.net/u471prst/

* {
  box-sizing: border-box;
}
.img-grid {
  width: 70%;
  border: 2px solid red;
}
.row {
  width: 100%;
  border: 2px solid blue;
}
.img-wrapper {
  width: 100%;
}
.img-wrapper img {
  width: 100%;
  height: auto;
}

<div class='img-grid'>
  <!-- one per page, typically fixed 70% of page width -->
  <!-- can be an arbitrary number of rows per grid -->
  <div class='row'>
    <!-- width would be 100% of img-grid width -->
    <!-- can be an arbitrary number of images per row -->
    <div class='img-wrapper'>
      <!-- wrapper needs to force images to same width -->
      <img class='image' src="http://placeimg.com/640/480/any" />
    </div>
  </div>
</div>

【讨论】：

感谢您的回复。但是，如果每行有多个大图像，这些图像会换行，而不是缩放以适应一行。我希望图像完全适合整个行，无论它们的原始宽度如何。