HTML +調整水平對齊圖像的大小

似乎很簡單，但我似乎無法弄清楚這一點。我有兩個圖像在父div內水平對齊。每個img都包含寬度，最小和最大寬度，而父寬度設置爲100％。當通過屏幕寬度將父寬度設置爲50％時，如何縮小這兩個圖像？例如：HTML +調整水平對齊圖像的大小

<!-- screen resized to 110px in width --> 
<div style="width:100%; display:block"> 
    <!-- actual image width is 200px --> 
    <img src="i.png" style="width:100%; min-width:100px; max-width:200px"> 
    <img src="i.png" style="width:100%; min-width:100px; max-width:200px"> 
</div>

但是，如果父容器不能適應寬度方向，則會將第二個img向下推。將white-space設置爲nowrap可以保持內聯，但不會縮小。幫助不大？

images wrapping instead of scaling down and staying inline

來源

2013-07-24 worked

嘗試設置'顯示：block'和'浮動：left'的圖像，似乎在用自己的方式讓他們之間的內聯「空白」。還設置父'overflow：hidden' –

你想要這樣的東西嗎？

的jsfiddle：http://jsfiddle.net/jplahn/4h9Vy/

嘗試調整父容器的寬度（在我的jsfiddle）。

HTML：

<div id="parent"> 
    <!-- actual image width is 200px --> 
    <img class="image" src="i.png" > 
    <img class="image" src="i.png" > 
</div>

CSS：

.image { 
    display: block; 
    float: left; 
    max-width: 200px; 
    width: 50%; 
    position: relative; 
} 

#parent { 
    overflow: hidden; 
    width: 100%; 
    display: block; 
}

來源

2013-07-24 19:47:39

你給了圖像的100像素的最小寬度，所以很明顯，當div的寬度小於200像素（110px在你的問題）時，第二張圖像會掉到另一行。如果你想縮小它，你應該刪除圖像上的min-width: 100px規則，並將它們的width設置爲50％，因爲現在 - 100％ - 它們將與父容器一樣寬。

我也建議你在代碼中另外一個改進。您不需要規則width:100%; display:block，因爲這些是所有塊元素的默認值 - 包括div。

試一下：http://jsfiddle.net/TMyr9/2/

來源

2013-07-24 19:54:55

HTML +調整水平對齊圖像的大小

回答

相關問題