我有两个div's命名为first和second,我将它们的宽度和高度设置为100%

.first{
     width : 100%;
    height : 100%;
}
.second{
     width : 100%;
    height : 100%;
}

现在我想在每个div中添加一个图像。这些图像应该填充整个div。
<img src="someimage.png" width="100%" height="100%"/>

我的问题是图像不应该被拉伸它应该被填满整个屏幕。我使用img img-responsive类来实现这一点。图像现在在不拉伸的情况下被填充,但是当调整大小时,它的大小会均匀地调整,并且它的高度也会降低,因此图像的高度现在不是100%被填充。有没有什么方法可以在不拉伸和降低高度的情况下获得覆盖整个屏幕的图像的宽度和高度?

最佳答案

看看这个,你应该在width: 100%旁边使用min-height: 100%,但是我recommend你可以在background-image中使用background-size: cover

.first{
     width : 100%;
    height : 100%;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.first img {
    width: 100%;
    min-height: 100%;
}

<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>

jsFiddle

关于html - 图片应具有响应性,并应在整个屏幕上填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40690672/

10-12 12:26
查看更多