css - 使图像垂直拉伸(stretch) 100%，同时保持比例

Question

我已经有一个投资组合页面 here

如您所见，肖像图像适合，而风景图像则不适合。我需要找到一种方法使横向图像适合 100% 的高度，但不在容器外水平显示任何内容。理想情况下，我想在不更改 HTML 代码(仅使用 CSS)的情况下执行此操作。我不介意元素是否通过高度而不是宽度缩放。

.w-portfolio-item-image img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

<div class="w-portfolio-item order_1 sculpture-commissions">
  <div class="w-portfolio-item-h">
    <a class="w-portfolio-item-anchor" href="http://www.inventivewebdesign.com/studioartnouveau/portfolio/the-compassion/">
      <div class="w-portfolio-item-image">
        <img class="w-portfolio-item-image-first" src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/06/SR4-The-Compassion-after-400x373.jpg" alt="The Compassion">
      </div>
      <div class="w-portfolio-item-meta">
        <div class="w-portfolio-item-meta-h">
          <h2 class="w-portfolio-item-title">The Compassion</h2>
          <span class="w-portfolio-item-text"></span>
          <span class="w-portfolio-item-arrow"></span>
        </div>
      </div>
    </a>
  </div>
</div>

Answer 1

假设您的 DIV 已经相应地缩放，

将div内的图片样式设置为高度100%，宽度auto。 然后设置DIV样式溢出为隐藏

将 DIV 溢出设置为隐藏将“裁剪”超出 DIV 设置尺寸的任何信息、图像或其他内容