Question

我已经有了投资组合页面here

正如您所看到的，肖像图像非常适合，而风景图像则不适合。我需要找到一种方法来使景观图像适合100％的高度，但不能在容器外部水平显示任何东西。理想情况下，我想这样做而不更改HTML代码（只使用CSS）。如果物品通过高度而不是宽度缩放，我不介意。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

假设您的DIV已相应缩放，

将div内的图像样式设置为高度100％和宽度自动。然后将DIV样式溢出设置为隐藏

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

使图像垂直拉伸100％，同时保持比例

1 个答案: