多流體圖像

我有一個簡單的容器中的圖像。多流體圖像

<div class="container" style="width:800px;"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
</div>

如果我設置img樣式max-width: 100%;容器可以改變寬度和規模裏面的圖像。完善。

但是，如果我在容器內有幾張圖像呢？像這樣。

<div class="container" style="width:800px; background:red;"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
</div>

上述代碼不會執行任何縮放並溢出到下一行 - 擴展容器高度。

如何使圖像的比例尺一致以適合純CSS的固定寬度？它甚至有可能嗎？

沙盒：http://tinkerbin.com/ijy5zgH3

來源

2012-11-15 aaronfarr

如果容器內圖像的數量是已知的，比如說3張圖像，你可以設置'.container img {width：33％;}' – Neps

@Neps這就是摩擦，圖像的數量是未知的。唯一的固定值是容器的寬度 – aaronfarr

不理想，但在這種情況下，您可以保留img {max-width: 100%;}而是求助於<table>

<table class="container" style="width:800px;"> 
    <tr> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
    </tr> 
</table>

來源

2012-11-15 22:28:53 Neps

這是我的備份計劃！希望找到更優雅的東西。但我們用我們得到的東西來工作！謝謝你的幫助！ – aaronfarr

，如果你願意改變HTML結構這將工作。

HTML：

<ul class="container" style="width:800px;"> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
</ul>

CSS：

img {max-width: 100%; } 
li { display: table-cell; }

DEMO

來源

2012-11-15 22:23:48

感謝Gurpreet。這也是一個很好的解決方案。希望避免表結構，但似乎沒有其他辦法。謝謝。 – aaronfarr

回答

相關問題