是否有相当于background-size:cover和contains for images元素?

我有一个网站有很多页面和不同的背景图片,我从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?


青春有我
浏览 745回答 3
3回答
打开App,查看更多内容
随时随地看视频慕课网APP