不是 width:100% 的流体图像

Question

我有一个场景，其中不同尺寸的图像出现在占页面宽度 50% 的列中。

在列宽超过图像原始宽度的大屏幕上，图像应呈现为其原始宽度，同时仍保持流畅。

图片尺寸各不相同（即横向与纵向），因此无法将单一宽度或高度应用于 img 元素。我可以将父元素限制为与将显示的最大图像宽度相匹配的最大宽度，但是宽度较小的图像一旦变得流畅就会扩展得太宽。

基本结构为：

<div class="column">
  <figure>
    <img>
  </figure>
</div>

有了这个CSS:

.column {width:50%;}
.column figure {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:800px; /* the largest image width */
    text-align: center; /* to center images of lesser width */
}
.column img {?}

我可以向 img 元素添加一个数据属性来指示方向，使用它来应用最大宽度，但这需要网站编辑做更多的工作，我需要避免这种情况。因此，我寻求仅 CSS 的解决方案...但我被卡住了。

有什么想法吗？

Answer 1

如何再次使用 max-width，让图像完全扩展到其容器的宽度，但不要更大？类似于：

.column img {
    max-width: 100%;
}

这将允许图像根据需要进行响应 - 缩放其父级的大小，但绝不会超过其原始宽度。这是一个带有一些随机图像的演示 - 请注意当给定足够多时，原生较小和较大的图像如何停止在不同的宽度 space:

.column {
  width: 50%;
}
.column figure {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  /* the largest image width */
  text-align: center;
  /* to center images of lesser width */
}
.column img {
  max-width: 100%;
}

<div class="column">
  <figure>
    <img src="http://www.ltsgrill.com/wp-content/uploads/2014/09/red_lobster.jpg" />
  </figure>
</div>

<div class="column">
  <figure>
    <img src="http://www.mjseafood.com/_assets/400x300/Crayfish.jpeg" />
  </figure>
</div>

不是 width:100% 的流体图像

Fluid image that is not width:100%

css

fluid-images