CSS：Div包裝圖像

Question

我有一個img元素style='width:40%;height:40%;'。我想添加一個自動換行的div。但是，當我插入div而不是包裝img時，它只是展開到div內部。

我該如何強制這個div來包裝IMG，因此它可以用作一個框架。之所以我不預設div的高度和寬度，是因爲img的百分比會動態給出，所以div應該根據img的大小包裝img。

Answer 1

帶圖像標籤的寬度和高度爲40％的問題是該圖像未縮減至其原始大小的40％，但佔用了其父項的40％，如您所見here。

在你的情況下，你想要將圖像封裝在一個div中，但仍然希望將它的大小設置爲其父級的40％。在這種情況下，父母是包裝div。你看到了問題。

如果你只是想使用DIV作爲一個框架，你可以使用CSS樣式的圖像，以獲得類似的效果，這樣的：這個原則here的

<img src="..." style="border: 1px solid #000000; padding:10px;"/>​ 

例。

Answer 2

使所有圖像浮動到左側。

img 
{ 
float:left; 
} 

，並清除與

<div style="clear:both"></div> 

如包裝DIV它關閉前的最後元素的每個格。

希望它有幫助。

Answer 3

如果你不喜歡這樣

<div id="wrapper"> 
    <img src="..."> 
</div> 

你可以在display: inline-block;屬性添加到wrapper。那爲我做了。然而，你的style='width:40%;height:40%;'將會通過它的父母進行調整，正如@ jesse-van-assen已經提到的那樣。