Question

我试图将未知大小的图像置于已知大小的div中，这样图像在div内垂直和水平居中，图像的纵横比不会失真。

这段代码几乎完成了这项工作，但两张图片看起来都略微向下移动......可能是几个像素。为什么呢？

HTML;

<body>
  <div class="container" id="c1">
    <img src="test.jpg"/>
  </div>
  <div class="container" id="c2">
    <img src="test.jpg"/>
  </div>
</body>

CSS;

.container {
 text-align: center;   /* Center the image horizontally */
 margin: 1em;  /* Just for looks */
 background: red; /* Just for looks */
}

.container img {
 vertical-align: middle;    /* See note below */
 max-height: 100%;   /* Limit the image size to fit the container */
 max-width: 100%;   /* Limit the image size to fit the container */
}

#c1 {
 width: 8em;
 height: 4em;   /* See note below */
 line-height: 4em;  /* See note below */
}

#c2 {
 width: 5em;
 height: 7em;   /* See note below */
 line-height: 7em;  /* See note below */
}

注意：通过使容器的行高与容器的高度相同，并将{vertical-align：middle;}应用于图像，图像在容器内垂直居中。这应该使图像在容器内垂直居中并且它几乎可以工作，除了图像总是两个像素太低。

我试过做* {margin：0; padding：0}和几个reset.css文件，但图像看起来仍然向下移动了一点。

所以我的问题实际上是两个问题;

未知大小的图像如何以已知大小的div为中心？
为什么img和div的边缘之间有一个小的差距？

问候，一个CSS新手。

Answer 1

我能想到的最简单的方法是使用jQuery：

$(document).ready(
    function(){
        $('img').each(
            function(){
                var imgHeight = $(this).height()/2;
                var imgWidth = $(this).width()/2;
                var div = $(this).parent();
                var divHeight = div.height()/2;
                var divWidth = div.width()/2;
                $(this).css(
                    {
                        'top':divHeight - imgHeight,
                        'left':divWidth - imgWidth
                    });
            });
    });

但是，我并不相信这是最精简的方式。但是，从好的方面来看，它的工作原理是：JS Fiddle Demo。

Answer 2

如果您不介意某些浏览器不一致，可以使用CSS3和灵活的盒子模型执行此操作：

<强> HTML

<div id="container">
    <div id="one">One</div>
</div>

<强> CSS

#container {
    background: rgb(230,230,230);
    display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center;
    display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center;
    height: 500px;
    width: 500px;
}
#container #one {
    background: rgb(200,200,200);
    padding: 15px;
}

示例：http://jsfiddle.net/brandondurham/q7feV/

Answer 3

您应该知道图像的宽度，将其置于中心，使用margin：div的自动CSS属性。我想如果你的问题的宽度未知，javascript是唯一的解决方案

Answer 4

在图像的onload事件中，您应该获取其宽度和高度，然后调整图像保持纵横比，然后使用JavaScript对图像进行中心化。

请检查我之前为测试目的而做的以下示例。

Proportional image resize on image load and displays a loading gif until image load

Answer 5

使用“margin：auto;”在图像上将其水平居中于div。

垂直居中“vertical-align”不起作用。如果容器是定位元素，你可以使用“top：50％”“margin-top： - （图像高度的一半）”，但由于你不知道高度，你需要使用javascript计算它。

如何将未知大小的图像置于已知大小的div中？

5 个答案: