Question

我有2个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％。有没有办法实现图像的宽度和高度覆盖整个屏幕而不拉伸和降低高度？

Answer 1

检查一下，您应该使用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>

{{1}}

<强> jsFiddle

Answer 2

我使用imgLiquid这是一个jQuery插件来调整图像大小以适应容器。

https://github.com/karacas/imgLiquid

它非常易于使用且重量轻。

图像应该是响应性的，应该在整个屏幕上填充

2 个答案: