图片应响应，并应充满整个屏幕

问题描述：

上我有一个名为第一和第二2个div的，我已经设置了宽度，并将它们的高度为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％，但是图像的限制会在高度上被取消。如果你想更确定的话，你应该拍摄一张具有足够高度或接受拉伸的图像。 – Daniel

实现此目的的最佳方式是使用图像作为div的背景，而不是将其添加为图像。你能做到吗？或者你需要它作为单独的标签吗？ – phobia82

答

检查了这一点，你应该使用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

谢谢。我会试试看。 – Harish

答

我用imgLiquid这是一个jQuery插件来调整图像装在一个容器中。

https://github.com/karacas/imgLiquid

这是超级好用，重量轻。

图片应响应，并应充满整个屏幕

相关推荐