根據父寬度/高度自動調整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

回答

相關問題