html - 如果宽度小于 100%，则填充图像？

Question

我有一种情况，我在 div 中动态显示图像。每个 div 的宽度相同，但图像不同。

我将图像的最大宽度设置为 100%，并将 div 的文本对齐设置为居中。这会使小于 div 的图像居中。但是，如果图像的宽度小于 div 的 100%，我希望在 div 的顶部和图像之间有一些填充。

有没有办法用 CSS 做到这一点？或者，我是否需要使用一点 JS 来完成此操作？

谢谢。

Quick example - http://jsfiddle.net/EFpgA/2/

Answer 1

如果您不介意将 div 的高度固定为 400px，这将起作用:

<!-- HTML -->
<div >
    <img src="//lorempixel.com/400/400"/>
</div>

<div >
    <!--I want padding here-->
    <img src="//lorempixel.com/300/300" />
</div>

/* CSS */
div 
{
    width: 400px;
    text-align: center;
    border-width: 2px;
    border-style: dashed;
    border-color: black;
    height: 400px;
    position: relative;
}

img 
{
    max-width: 100%;
    height: auto;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}