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

使用全宽背景图像时，您可以设置背景大小：封面。使图像适合屏幕而不会丢失图像的质量。全宽div中图像的背景大小值

是否有类似的解决方案的图像？

我在全屏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; 
}

有没有什么建议？缩放，调整大小，...？

来源

2015-09-07 Sesamzaad

你试过'宽度：100％;身高：100％;位置：固定;左：0;顶部：0;'？ – Justinas

你可以发布小提琴吗？ –

您可以在src - width =“auto”height =“500”之后的路径中设置img的大小，例如 –

利用此解决方案中的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％的宽度，但它的高度被拉伸/缩小到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

来源

2015-09-07 09:32:37 bbosternak

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

回答

相关问题