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

Question

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

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

有没有办法用 CSS 做到这一点？或者，我需要使用一点 JS 来完成这个吗？

谢谢。

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

Answer 1

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

<!-- 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;
}

Answer 2

John- 这可以通过一些方便的 jquery 和 javascript 来解决。

阅读完您的标记后，看起来生成的图像的最大宽度是 400 像素。

为了解决您的填充问题，让我们编写一个 javascript 函数来测试您的图像宽度，并根据宽度执行一个添加填充的函数。

这里的代码分步说明了它的工作原理。

在文档的头部，添加 jquery。在我的示例中，我使用了 google 托管版本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

现在你已经用 jquery 加载了你的文档，写出你的 javascript 函数 1) 定义你的文档对象，测试它的宽度并执行一个函数来根据返回的宽度添加填充。

<script>
  function imgPadding(image){
    var image = document.getElementsByTagName('img'); 
      if(image.width != '400px') { //tests for the default 'max' width
        $(image).css({'padding-top': '10px'}); //adds the padding if the test passes
      }
      else {
        return false; //doesn't add padding if the max-width is met
      }
    }
    $(document).ready(function() {
      imgPadding('img'); //calls the function after the images have been loaded
    });
</script>