缩放图像封面 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;
}

js小提琴

---

Javascript polyfills：

• 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

Answer 2

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

如果从此类中删除height: 200px;，图像将缩放，同时保留其纵横比。

Answer 3

span不需要是flex容器，你可以把它做成一个table-cell的容器，并使用vertical-align和text-align。

图像可能还需要max-width:100%;，除非您希望它溢出，否则max-height和max-width可以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>