根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度答案

【问题标题】：auto adjust img width/height depending on parent width/height CSS HTML根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度
【发布时间】：2013-02-07 19:12:43
【问题描述】：

我正在尝试用图像填充窗口。我正在使用 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 是最大的，所以其中一方将不得不放弃。

谢谢

【问题讨论】：

最大宽度/最大高度？

标签： image html css

【解决方案1】：

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

background-size: 100% 100%;

【讨论】：

我正在使用 PHP 生成 img src。我认为除非我做内联样式，否则我将无法使用背景图像？这是唯一的方法吗？
对不起，我对 PHP 不熟悉。所以，我不能对此发表评论。

【解决方案2】：

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

请看demo

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

去掉border属性就好了，我用它来解释！

【解决方案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%;
}

【讨论】：

我不认为那些绝对位置真的有帮助
我认为它只是挤压图像？
是的，它会挤压图像或拉伸图像以适应指定的尺寸。您可以通过这种方式将图像设置为您想要的任何大小的百分比。
我并不是要“挤压”图像。这就是为什么我有溢出：隐藏，我需要保持相同的大小比例
是的，宽度：100%； height:100% 将确保它不被挤压。如果它不是方形图像，则需要更改容器的宽度高度，即 Maindiv