根据父宽度/高度CSS HTML自动调整图像宽度/高度

Question

我正在尝试用图像填充窗口。我正在使用CSS来尝试这个，但我想知道是否有办法最大化图像的宽度/高度，直到所有的空白都被填满，但不会破坏质量。

<div class='rel-img-cont'>
    <img src='src.jpg' />
</div>

.rel-img-cont
{
    width: 100px; height: 100px; overflow: hidden;
}
.rel-img-cont img
{
    height: 100px; margin:0 0 0 0;
}

如何填充空白区域，即使其中一个尺寸必须溢出，也只能达到100px。

有没有办法做到这一点，即使原始图像是100px x 100px或150px x 200px，无论哪一个，最大100px，所以其中一方必须给予。

由于

Answer 1

您可能会发现background-size css属性很有趣。因为这个属性和你试图在这里做的一样。但这适用于background-image。

background-size: 100% 100%;

Answer 2

  

.rel-img-cont {       宽度：100％;       身高：100％; }   .rel-img-cont img {       高度：100％;       宽度：100％; }

请参阅demo

Answer 3

您可以将宽度设置为100％并将高度保留为自动。并且只使用那些与你的div成比例的img。

Answer 4

使用在我的机器上测试的代码

 <style>
 .rel-img-cont
{
    width: 10%; height: 10%; overflow: hidden;
    border:3px solid orange;
}
.rel-img-cont img
{
    height: 100%; margin:0 0 0 0;
    width:100%;
}
 </style>

Answer 5

在这种情况下，最好使用％而不是px

<div id="Maindiv" style="width:100px;height:100px">
<img id="Img" src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" alt="Image"  />
</div>

CSS

#Maindiv img
{
width:100%;
height:100%;
}