全宽 div 中图像的背景大小类似值答案

【问题标题】：Background-size like value for an image in a full width div全宽 div 中图像的背景大小类似值
【发布时间】：2015-12-02 18:53:28
【问题描述】：

当使用全宽背景图片时，您可以设置背景尺寸：封面。使图像适合屏幕而不损失图像质量。

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

我在全屏 div 中使用图像（最大高度：500px），但是当将全宽应用到图像时，图像高度要高得多（+1000px）所以有没有解决方案让这个图像完全适合最大高度为 500px 的 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;
}

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

【问题讨论】：

你试过width: 100%; height: 100%; position: fixed; left: 0; top: 0;吗？
你能发个小提琴吗？
你可以在src后面设置img的大小 - width="auto" height = "500" 例如
你试过了吗 - img { max-height: 500px; width: 100% } ??

标签： html css

【解决方案1】：

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

.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% 宽度，但它的高度被拉伸/收缩到 500 像素：

.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

【讨论】：