Html 图像应具有响应性，并应在整个屏幕上填充

我有两个div，分别命名为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%填充。有什么方法可以在不拉伸和降低高度的情况下实现图像的宽度和高度覆盖整个屏幕吗？

请检查，您应该在

最小高度：100%

旁边使用

宽度：100%

，但我建议您使用

背景图像

和

背景大小：覆盖

.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>

。首先{
宽度：100%；
身高：100%；
}
正文，html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.第一次img{
宽度：100%；
最小高度：100%；
}

---

我使用imgLiquid这是一个jQuery插件，用于调整图像大小以适合容器

---

它的超级容易使用和重量轻

不是真的。。。你必须考虑你的屏幕可能不是某人的ELSE。您可以将图像的宽度设置为100%，但图像的约束会降低高度。如果你想更确定，你应该拍摄一张有足够高度或可以拉伸的图像。实现这一点的最佳方法是使用图像作为div的背景，而不是将其作为图像添加。你能做到吗？或者你需要它作为单独的标签吗？