CSS：图像缩放方面以填充答案

【问题标题】：CSS : Images scale aspect to fillCSS：图像缩放方面以填充
【发布时间】：2014-10-03 13:32:15
【问题描述】：

我在一个由 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 aspect to fill

【问题讨论】：

您可以尝试使用 Media-Queries 根据屏幕大小更改背景大小。它非常灵活。类似this

标签： html css image

【解决方案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：

【讨论】：

@J.Guilherme 对我来说很好用。无论如何，只需使用 html 表单 UPD2

【解决方案2】：

我不知道我是否正确回答了您的问题，但您可以尝试使用 background-size: cover（您不需要包装器）。

【讨论】：