html - CSS : Images scale aspect to fill

Question

我在一个由 div 包裹的 html 页面中有一个封面图像。div 大小始终为 width:100% height:33%。我希望任意图像都可以缩放以填充，而不会在任何屏幕尺寸和比例上被拉伸(stretch)。

我的 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:缩放方面以填充

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: