html - 全宽 div 中图像的背景大小值

Question

当使用全宽背景图像时，您可以设置 background-size:cover。使图像适合屏幕而不损失图像质量。

图片有类似的解决方案吗？

我在全屏 div 中使用图像(最大高度:500px)，但是当将整个宽度应用于图像时，图像高度要高得多(+1000px)，所以有没有一种解决方案可以让这个图像完美地适应最大高度为 500 像素的 100% 宽度的 div？

我现在使用 margin-bottom:-20% 但图像分辨率很差而且放大了很多。

.node-type-article .group-header{
    margin: 0 -100% 50px -100%;
    max-height: 500px;
}
.node-type-article .group-header img{
    margin-bottom: -20%;
}
.node-type-article .l-main{
    overflow: visible !important;
}

那么有什么建议吗？缩放、调整大小、...？

Answer 1

使用此解决方案，图像适合 100% 宽度并裁剪为 500 像素高度:

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;

}

Fiddle

或者使用这个解决方案，图像也是 100% 宽度，但它的高度被拉伸(stretch)/收缩到 500px:

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;
    height: 100%;
}

Fiddle

或者检查这支笔:http://codepen.io/ErwanHesry/pen/JcvCw