如何使用 CSS 使图像适合 200 像素的方框？

Question

我有一堆图像，它们都适合 400px × 400px 的盒子（也就是说，其中一个尺寸为 400px，另一个尺寸较小）。我希望能够使用 CSS，但如果需要，可以使用 jquery/javascript，将该图像适合 200px x 200px 的框，以便图像的两个边缘接触框，并且图像的其他两个边缘之间有间隙盒子。 必须保持纵横比。

我的 HTML 如下：

<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

我的 CSS 为：

div.images div.small
{
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
}
div.images div.small img
{
    vertical-align:middle;
    max-width:200px;
    max-height:200px;
}

您可以在此处查看示例。

不幸的是，我的风景图像紧贴盒子的顶部，而我希望它们居中。另外，我不确定依赖 max-width/max-height 是否明智。

如何将我的图像置于这些框中的中心？

Answer 1

我在我的电脑上设置了这个并且运行良好。查看示例页面后，问题是因为您将图像设置为 display:block。要么从您的常规 img 规则中删除该规则（无论如何，全局设置很奇怪），或者将您上面发布的图像规则更改为：

div.images div.small img
{
    vertical-align: middle;
    max-width: 200px;
    max-height: 200px;
    display: -moz-inline-box; /* Firefox 2 */
    display: inline-block;
}

默认情况下， img 元素和其他“替换”元素（Flash 等）是“内联块” - 这意味着它们像文本一样内联流动，但具有宽度和高度。

Answer 2

我前段时间需要做同样的事情，我在 this 中找到了一个很好的实现链接。
“将图像在 div 内垂直和水平居中，而不知道图像的大小”。

它按预期对我有用。

Answer 3

我曾经遇到过这个垂直居中问题，为了让它在所有浏览器中正常工作，我求助于 javascript / jQuery：

$(document).ready(function() {
    $('img').each(function() {
        image_height = $(this).height();
        margin_top = (200 - image_height) / 2;
        $(this).css('margin-top', margin_top + 'px');
    });
});

请注意，如果图像尺寸是，您将需要 $(window).load 而不是 $(document).ready html 中没有给出。

Answer 4

您是否尝试过使用：

display:block;
margin-left:auto;
margin-right:auto;

应该将块级元素居中

Answer 5

无论您想要什么尺寸，这里都有一个解决方案。它将缩小但不会放大，垂直和水平居中，并且仅使用 CSS。我花了一段时间才弄清楚。

将 放入

中，然后根据需要放置 div（即，为其指定所需的大小，确保设置 < code>position 属性），然后应用此：

.mydiv > .myimg {
    vertical-align: bottom;
    max-height:     100%;
    max-width:      100%;
    position:       absolute;
    margin:         auto;
    top:            0;
    right:          0;
    bottom:         0;
    left:           0;
}