我有一个有许多页面和不同背景图片的网站,我从CSS中显示它们,如下所示:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
然而,我希望使用<img>
元素在一个页面上显示不同的(全屏)图片,并且我希望它们具有与上述background-image: cover;
属性相同的属性(图像不能从CSS显示,它们必须从HTML文档显示)。
通常我使用:
div.mydiv img {
width: 100%;
}
或者:
div.mydiv img {
width: auto;
}
使图片丰满且响应性强。然而,当屏幕变得太窄时,图片会缩小太多(width: 100%
),并在屏幕底部显示身体的背景色。另一种方法是width: auto;
,它只使图像全尺寸显示,而不响应屏幕大小。
有没有一种方法可以像background-size: cover
一样显示图像?
https://stackoverflow.com/questions/11670874
复制相似问题