html - 图像纵横比填充模式 : CSS

Question

我是一名 iOS 开发者。我们在 imageview 上有 aspect fill 属性。此属性让图像填充目标视口(viewport)或容器但保持纵横比。

现在填充以某种我无法使用纯 css 实现的方式工作。我要写下下面的代码。解释我的需要很难用英语表达，所以请尽量忍受并耐心等待。所以这里是:

Aspect Fill:这只填充所需的比例因子。例如:如果图像大于视口(viewport)大小，则图像将按比例缩小以保持宽高比，直到它变得小于视口(viewport)，否则它将是“适合”效果。它必须填充视口(viewport)。超出视口(viewport)边界的额外部分将被剪掉。

如果图像小于视口(viewport)，则图像将保持宽高比放大，直到刚好填满视口(viewport)。超出视口(viewport)边界的额外部分将被剪掉。

填充的比例因子很重要。我希望我解释了我的需要。在尝试通过网络学习实现之后，我想出了以下代码。这段代码没有按照我想要的方式填写。它保持纵横比但以 100% 缩放或比例填充。

.page-container, .page {
  width: 320px;
  height: 480px;
}

.page {                     
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-image {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

<div class="page-container">
  <div class="page">
     <img class="page-image" src="https://images.unsplash.com/photo-1495974887311-a817001ebd74" alt="">
  </div>
</div>

您可以在 unsplash 链接中查看该原始图像。 您可以在较小的图像上进行测试:https://upload.wikimedia.org/wikipedia/commons/5/50/Salta-VallesCalchaquies-P3140151.JPG

这种模式能否在纯 css 中实现，或者我是否需要 javascript 来根据我的要求为每个图像操纵新尺寸，这些图像根据我的要求进行纵横比填充视口(viewport)？

Answer 1

您可以在图像类中使用 object-fit: cover;。

您还需要为图像添加宽度 和高度。 (注意:它在 Internet Explorer 上不起作用，但您可以添加一个 polyfill like this ! 以使其在 Internet Explorer 上也能正常工作)。

这是基于您的代码的示例:

.page-container, .page {
  width: 320px;
  height: 480px;
}

.page {                     
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-image {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="page-container">
  <div class="page">
     <img class="page-image" src="https://images.unsplash.com/photo-1495974887311-a817001ebd74" alt="">
  </div>
</div>