如何使图像的高度/宽度/填充自动缩放以适合正确的图像

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注释意味着有图像之间没有空格。