如何使圖像的高度/寬度/填充自動縮放以適合正確的圖像

Question

我想要做的就是讓本網站上的圖像在50-60px之間改變寬度和高度（它們應該相等）。但是在它們之間它們都需要5px的最小填充。這可以根據圖像的大小而有所不同，這是因爲兩個最終圖像需要適合父div的邊緣，以便與關於它的圖像對齊。高度/寬度/填充應全部改變，以確保圖像在屏幕尺寸改變時仍能正確對齊。

如果你看看這個頁面，你將能夠看到我的意思。需要改變的圖像是底部的灰色方塊。

http://media.gaigo.org/work2.html

這是我的html：

<div class="smallImages"> 
    <div><a href="#item-1"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-2"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-3"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-4"><img src="static/img/smallImage.png"></a></div> 
</div> 

和我的CSS如下：

smallImages div { 
    display: inline-block; 
    padding: 5px; 
} 
.smallImages div img { 
    max-width: 60px; 
    min-width: 50px; 
    max-height: 60px; 
    min-height: 50px; 
} 

很抱歉，如果這似乎令人困惑。只是問你是否需要我解釋更多。

Answer 1

這就是你所追求的。

顯示行內塊不會讓圖像以您需要使用表格的方式行爲。

你應該只檢查您工作網站的源代碼..

.row { 
 
    display: table-row; 
 
} 
 
.smallImages { 
 
    padding-left: 0px; 
 
    margin-bottom: 0px; 
 
    display: table; 
 
    text-align: center; 
 
} 
 
.smallImages .row div { 
 
    display: table-cell; 
 
    padding: 5px; 
 
} 
 
.smallImages .row div:first-child { 
 
    padding-left: 0; 
 
} 
 
.smallImages .row div img { 
 
    max-width: 100%; 
 
} 
 
img { 
 
    border: 0; 
 
}

<div class="smallImages"> 
 
    <div class="row"> 
 
    <div> 
 
     <a href="#item-1"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-2"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-3"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-4"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-5"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-6"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-7"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-8"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-9"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-10"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-11"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-12"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

一種選擇是設置百分比寬度，但這個數字百分比取決於數量在你的行中的圖像。看到這個例子：

* { 
 
    box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */ 
 
} 
 
.container { 
 
    width:400px; /* set this to whatever you like, it should work still */ 
 
    padding:5px; 
 
    border:1px solid; 
 
} 
 
.row { 
 
    width:100%; 
 
    padding:0 5px; 
 
} 
 
.row img { 
 
    padding:5px; 
 
} 
 
.row.one img { 
 
    width:100%; 
 
} 
 
.row.two img { 
 
    width:50%; 
 
} 
 
.row.three img { 
 
    width:33.33%; 
 
} 
 
.row.four img { 
 
    width:25%; 
 
}

<div class="container"> 
 
    <div class="row one"> 
 
    <img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row two"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row three"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row four"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
</div>

把線之間HTML註釋意味着有圖像之間沒有空格。