我是iOS开发人员。我们在imageview上具有纵横比填充属性。此属性使图像可以填充目标视口或容器,但保持宽高比。

现在,以某种我无法使用纯CSS实现的方式填充。我要写下下面的代码。解释我的需要是用英语很难用它来表达,所以请尝试忍受并保持耐心。所以这里是:

宽高比填充:仅填充所需的比例因子。例如:如果图像大于视口大小,则图像将按比例缩小以保持宽高比,直到变得小于视口,否则将是“合适”的效果。它必须填充视口。超出视口范围的多余部分将被剪切掉。

如果图像小于视口,则图像将按比例进行缩放,直到长满视口为止。超出视口范围的多余部分将被剪切掉。

填充比例因子很重要。我希望我解释了我的需要。尝试在网上学习以实现目标之后,我想到了以下代码。这段代码无法满足我的需求。它保持宽高比,但可以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>





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

可以在纯CSS中实现此模式,还是需要JavaScript根据我的要求为纵横比填充视口的每个图像操纵新的尺寸?

最佳答案

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

您还需要在图像中添加widthheight
(注意:它在Internet Explorer上不起作用,但是您可以添加一个polyfill like this!使其也在那里工作)。

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



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

关于html - 图像宽高比填充模式:CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50853466/

10-12 12:39
查看更多