html - 缩放图像封面 div 并保持纵横比

Question

我正在尝试在包装器中放置一张图片，并希望图片随着浏览器窗口的变化而增大/缩小。该图像不是背景图像，而是内联 <img>元素。

我所拥有的是有效的，但我只能让它强制 100% 高度——有时宽度会变短。我想强制图像为宽度的 100%，即使它比图像本身大(图像只会被扭曲/放大)，并且始终使图像居中。因此，无论如何，图像将占据整个包装器，必要时放大图像，并随着浏览器窗口增大/缩小。

(您可以通过在完整窗口中打开代码段来更好地查看它)

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 填充代码:

• > https://github.com/anselmh/object-fit
• > https://github.com/bfred-it/object-fit-images
• > https://github.com/tonipinel/object-fit-polyfill
• > https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.be199342j