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

我试图用图像填充窗口。我正在使用CSS来尝试这个工作，但我想知道是否有一种方法可以最大化图像的宽度/高度，直到所有的空白空间都被填满，但不会破坏质量。根据父宽度/高度自动调整img宽度/高度CSS HTML

<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是最大，所以其中一方将不得不提供这种方法。

感谢

来源

2013-02-22 hellomello

最大宽度/最大高度上测试？ – TheZuck 2013-02-22 08:20:32

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

background-size: 100% 100%;

来源

2013-02-22 08:22:04

我使用PHP来生成img src。我不认为我能够使用背景图像，除非我做内联风格？这是唯一的方法吗？ – hellomello 2013-02-22 08:23:45

对不起，我对PHP不熟悉。所以，我无法对此发表评论。 – 2013-02-22 08:24:54

-1

其更好地在这种情况下使用％代替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%; 
}

来源

2013-02-22 08:26:17

我不认为这些位置绝对有帮助 – hellomello 2013-02-22 08:36:35

而我认为它只是挤压图像？ – hellomello 2013-02-22 08:39:12

是的，它会挤压图像或拉伸图像以适合指定的尺寸。您可以通过这种方式将图像以您希望的大小的百分比表示出来。 – 2013-02-22 08:44:24

的.rel-IMG-CONT { 宽度：100％; 身高：100％; } .rel-img-cont img {height：100}; height：100％; 宽度：100％; }

请参阅demo

来源

2013-12-27 09:34:06

可以使宽度为100％，并留下高度为自动。只使用那些与你的div成比例的img。

来源

2013-12-27 09:41:48 MackMon

使用此代码，这是我的机器

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

enter image description here

来源

2013-12-27 09:45:02

只需删除border属性。我用它来解释！ – 2013-12-27 09:45:49

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

回答

相关问题