缩放图像覆盖 div 并保持纵横比

Question

我正在尝试在包装器中放置一个图像，并希望图像在浏览器 window 中 grow/shrink。该图像不是背景图像，而是内联<img>元素。

我所拥有的正在运行，但我只能让它强制 100% 高度 - 有时宽度会变短。我想强制图像为宽度的 100%，即使它比图像本身大（图像将只是 distorted/zoomed 英寸），并且始终将图像居中。所以，无论如何，图像将占据整个包装器，必要时放大图像，并且将 grow/contract 与浏览器 window.

（打开完整的代码片段可以看得更清楚 window）

ul.archive-list > li {
  display: block;
}
ul.archive-list > li {
  padding: 0 20px;
  width: 25%;
  float: left;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
ul.archive-list .archive-img-wrap {
  height: 200px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  background: red;
}
ul.archive-list img.archive-img {
  width: auto;
  max-height: 200px;
}
ul.archive-list h1.archive-title {
  margin: 25px 0 0 0;
  font-size: 1.2em;
  color: #535353;
}

<ul class="archive-list">
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
</ul>

Answer 1

您可以使用 object-fit，请注意目前 IE 和 Edge 不支持。

img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

jsFiddle

Javascript 填充代码：

Answer 2

您现在使用的 CSS 实际上可以解决问题。问题是您的图像高度受到 ul.archive-list .archive-img-wrap.

的限制

如果您从此 class 中删除 height: 200px;，您的图像将在缩放的同时保持其纵横比。

Answer 3

span 不需要是 flex 容器，您可以将其设为 table-cell 类容器并使用 vertical-align 和 text-align。

image 可能还需要 max-width:100%; 除非你想让它溢出，然后 max-height 和 max-width 可以 tutn 到 min-height 和 min-width 。

ul.archive-list > li {
  display: block;
}
ul.archive-list > li {
  padding: 0 20px;
  width: 25%;
  float: left;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
ul.archive-list .archive-img-wrap {
  height: 200px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  display: table-cell;
  vertical-align: middle;
  background: red;
}
ul.archive-list img.archive-img {
  max-width: 100%;
  max-height: 100%;
}
ul.archive-list h1.archive-title {
  margin: 25px 0 0 0;
  font-size: 1.2em;
  color: #535353;
}

<ul class="archive-list">
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
</ul>

缩放图像覆盖 div 并保持纵横比

Scaling image cover div and preserving aspect ratio

html

css

aspect-ratio