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

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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: