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

Answer 2

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

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

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

这是代码，逐步解释它是如何工作的。

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

<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>

如果宽度小于100％，请填充图像？

2 个答案: