image - 根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度

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;
}

如何填充空白空间，即使其中一个尺寸必须溢出，它也只能达到 100 像素。

有没有办法做到这一点，即使原始图像是 100px x 100px 或 150px x 200px，无论哪一个，100px 是最大的，所以其中一方将不得不放弃。

谢谢

Answer 1

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

Answer 2

.rel-img-cont { 宽度：100%; 高度：100%；} .rel-img-cont img { 高度：100%; 宽度：100%；}

请看演示

Answer 3

您可能会发现background-sizecss 属性很有趣。因为此属性与您在此处尝试处理的相同。但这适用于background-image.

background-size: 100% 100%;

Answer 4

在这种情况下，最好使用 % 而不是 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%;
}

Answer 5

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

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