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

【问题标题】：How can I make images fit into a 200 pixel square box using CSS?如何使用 CSS 使图像适合 200 像素的方形框？
【发布时间】：2010-11-22 07:32:22
【问题描述】：

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

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

您可以查看示例here。

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

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

【问题讨论】：

只有我能够做到垂直居中是计算父级的大小和子级的大小，然后设置子级相对于父级的位置，使其居中。如果您的目标浏览器支持 Max-Width 和 max-Weight，则可以。

标签： javascript css image bounding-box

【解决方案1】：

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

将您的<img> 放在<div> 中，然后根据需要定位 div（即，给它您想要的大小，确保设置position 属性），然后应用此：

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

【讨论】：

【解决方案2】：

我在我的电脑上设置了它，它运行良好。查看示例页面后，问题在于您已将图像设置为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 等）是“inline-block” - 这意味着它们像文本一样内联，但有宽度和高度。

【讨论】：

肖像图片顶部似乎有像素偏移（请参阅上一个链接）。任何想法为什么？
我不是 100% 确定，但文本会有些奇怪（即使那里没有文本）。将div.images div.small 设置为line-height: 98px; 或将font-size: 1% 添加到div.images div.small img 对我有用。

【解决方案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');
    });
});

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

【讨论】：

【解决方案4】：

您是否尝试过使用：

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

应该以块级元素为中心

【讨论】：

我的印象是<img/> 是一个内联元素。无论如何，这不适用于垂直居中。
哦，我的错，它是一个内联元素。编辑了我的答案。如果您的容器 div 具有固定高度，则 margin:auto; 应该垂直居中
margin:auto 仅水平居中，而不是垂直居中。

【解决方案5】：

前段时间我也需要这样做，我在this link 中找到了一个很好的实现。 “在不知道图像大小的情况下，将图像在 div 中垂直和水平居中”。

它按预期对我有用。

【讨论】：

太棒了，我不知道你可以在 CSS 中做到 this.height。
我会远离表达式和其他 IE hack，我不确定它们是否有必要。
主要问题是图像需要被拉伸以适应盒子，同时保持它的纵横比。我很确定可以使用line-height 实现居中。我的问题是调整图像大小。
很好的链接，但它没有回答问题。如果可以的话，我会投反对票。
表达式已弃用，在未来的版本中。其他浏览器不支持。