響應圖像格

我有這個標記：響應圖像格

<div class="girls" style="text-align:center; margin-top:100px"> 
    <img src="images/1.png" /> 
    <img src="images/2.png" /> 
    <img src="images/3.png" /> 
    <img src="images/4.png" />

和這個CSS（我使用Twitter的引導）：

img { 

    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic;

}

的圖像有等寬和高，並且內聯顯示。

在我的決議確定，適合整個寬度（1366px），但在較低的分辨率圖像不適合。所以，我需要保持的比例在每個屏幕分辨率（低於1366px在我的情況）

我發現這個picturefill

我想這對我來說是有幫助的，但我想，它的一個更簡單的解決方案爲我的情況，因爲我有4個圖像，我需要水平顯示它們並使它們在每個分辨率上縮放。

謝謝！

來源

2013-04-04 agis

如果您正在使用Twitter的引導，然後用適當的標記像Twitter Bootstrap documentation：

<div class="row-fluid"> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
<div>

http://jsfiddle.net/zNLBG/

來源

2013-04-04 22:14:15

您可以將圖像的樣式width屬性設置爲25％，而無需指定高度。如果你總是放4張圖片，它們的寬度相同，而你的容器div始終爲100％，那就行了。

HTH

舊金山

來源

2013-04-04 22:01:20

我一直在努力，在25集圖像％並刪除高度：auto;但如果我調整了瀏覽器的大小，仍然崩潰。 – agis 2013-04-04 22:12:47

好吧，我只是試了一下，我不得不注意2件事：1）不要在圖像之間留下空間，2）將此樣式屬性添加到您的容器div：'white-space：nowrap'。對我來說，它甚至可以在調整大衣的同時起作用。 – 2013-04-04 22:41:36

回答

相關問題