如何将一行图片缩放以适应容器宽度？

Question

我希望展示一组图片，能够自动按比例缩放适应可用宽度。每行图片数量不确定，可用宽度会随着用户调整窗口大小而变化。原始图片的宽度也可能不同，但需要以相同的宽度显示。我希望避免使用表格，需要一个CSS-only（仅用CSS）的解决方案。我预计的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样式感到困惑，以使图片具有相同的宽度，缩放该宽度，以便（任意数量的）图像适合行而不换行，并确保随着浏览器窗口宽度的更改，一切都重新调整比例。

谢谢 尼格尔

- nakb

---

你是否使用了像Bootstrap或Zurb这样的框架？ - nCore

不，我只是使用普通的HTML和CSS。 - nakb

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

- Stickers

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

- Luizgrs

---

Flex表现非常出色，但有没有支持早期浏览器（例如IE9）的想法？ - nakb

对于IE8-9，您可以使用display:table-cell来设置.img-wrapper，虽然不如flexbox完美，但仍能发挥良好的作用。 - Luizgrs

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

- Vitorino fernandes

---

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