CSS div inline-block + img max-width

我一直在尋找一段時間的答案現在&正在修補它一段時間，但似乎無法找到解決方案。大概就像地獄一樣簡單，但是我無法把頭圍住它。CSS div inline-block + img max-width

我已經將圖像與包裝在容器中的「最大寬度：44％」的內聯樣式相關聯。

如何讓容器與圖像內部的圖像具有相同的寬度？

<div class="post" > 
<img src="http://placekitten.com/200/300" style="vertical-align:bottom; max-width:44%;"/>           
</div> 

.post{position:relative; display:inline-block; border: 1px solid lime; }

這裏的jsfiddle例如：http://jsfiddle.net/37Fyb/2/

來源

2013-03-27 user1469314

試試這個：

.post{ 
    position:relative; 
    display:inline-block; 
    border: 1px solid lime; 
    max-width:44%} 

img{ 
    vertical-align:bottom; 
    max-width:100%; 
}

來源

2013-03-27 15:25:12

是的，這似乎已經伎倆，謝謝一百萬！ – user1469314 2013-03-27 16:20:23

百分比寬度的子元素設置爲其父的寬度的這一比例。在這種情況下，孩子是你的img，父母是你的.post分隔符。將圖像的寬度設置爲44％將其設置爲分隔線寬度的44％ - 這意味着無論您對容器使用何種圖像，圖像的寬度始終爲44％。要解決這個問題

一個辦法是給你的img 100％的寬度和你.post分頻器的44％的寬度，然後再包在固定寬度其它分割：

HTML

<div class="outerContainer"> 
    <div class="post" > 
     <img src="..." style="... width:100%;" />           
    </div> 
</div>

CSS

.outerContainer { 
    width:202px; 
} 
.post{ 
    border: 1px solid lime; 
    width:44%; 
}

JSFiddle example。

來源

2013-03-27 15:41:36

CSS div inline-block + img max-width

回答

相關問題