Question

我在一个由div包装的html页面中有一个封面图片。 div大小始终为宽度：100％高度：33％。我希望任意图像都可以缩放以进行填充，而不会在任何屏幕尺寸和比例上进行拉伸。

我的CSS看起来像这样：

.headerImageWrapper{
  position: relative;
  width: 100%;
  height: 33%;
  overflow:hidden;
}

.coverImageCentered{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;   
  margin: auto;
}

我的问题是图像尺寸不是满足这些条件的最小值。

See the image to understand better

我是iOS开发人员，如果你现在的工作原理基本上就像要填充的contentMode：scale方面那样

Answer 1

这就是你要找的......你可以在设备上测试这个解决方案 http://jsbin.com/joxinizo/4

源代码：

http://jsbin.com/joxinizo/4/edit

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.bgd {
  position: relative;
  width: 100%;
  height: 33%;
  overflow: hidden;
}

.bgd-cover {
  position: absolute; 
  top: 0; 
  left: -50%; 
  width: 200%; 
  height: 100%;
  overflow: hidden;
}
.bgd-cover-img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 13%;
}

UPD：我更新了我的答案

UPD2：

Answer 2

我不知道我的问题是否正确，但您可能会尝试使用background-size: cover进行试验（您不需要使用此包装纸。）

CSS：图像缩放方面填充

2 个答案: