根据父宽度/高度自动调整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是最大,所以其中一方将不得不提供这种方法。
感谢
您可能会发现background-size
CSS属性有趣。因为这个属性和你试图在这里接近的一样。但是这将适用于background-image
。
background-size: 100% 100%;
我使用PHP来生成img src。我不认为我能够使用背景图像,除非我做内联风格?这是唯一的方法吗? – hellomello 2013-02-22 08:23:45
对不起,我对PHP不熟悉。所以,我无法对此发表评论。 – 2013-02-22 08:24:54
其更好地在这种情况下使用%代替PX
<div id="Maindiv" style="width:100px;height:100px">
<img id="Img" src="http://blog.flattr.net/wp-content/uploads/2011/09/*.png" alt="Image" />
</div>
CSS
#Maindiv img
{
width:100%;
height:100%;
}
我不认为这些位置绝对有帮助 – 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
可以使宽度为100%,并留下高度为自动。只使用那些与你的div成比例的img。
使用此代码,这是我的机器
<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属性。我用它来解释! – 2013-12-27 09:45:49
最大宽度/最大高度上测试? – TheZuck 2013-02-22 08:20:32