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

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

我的HTML如下所示：

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

你可以看到一个样品

不幸的是，我的风景图片紧靠着盒子的顶部，而我希望它们居中。此外，我不确定依赖于

最大宽度

/

最大高度

的明智之处

如何在这些框中居中放置图像？

您是否尝试过使用：

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

---

这应该是块级元素的中心

我不久前也需要这样做，我在中发现了一个很好的实现。 “在不知道图像大小的情况下，将图像垂直和水平居中放置在div中”

---

这对我来说就像预期的一样。我在电脑上设置了它，它工作得很好。查看示例页面后，问题在于您已将图像设置为

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等）是“内联块”——这意味着它们像文本一样内联流动，但有宽度和高度。

我曾经遇到过垂直居中问题，为了使它在所有浏览器中都能正常工作，我求助于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中没有给出图像尺寸。

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

将

放入

中，然后根据需要定位div（即，给定所需大小，确保设置

位置

属性），然后应用以下方法：

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

---

我觉得

是一个内联元素。无论如何，这对垂直居中不起作用。哦，糟糕，这是一个内联元素。编辑了我的答案。如果您的容器div具有固定高度，则

margin:auto

als应该垂直居中

边距：auto

只水平居中，而不是垂直居中。太棒了，我不知道你能做到这一点。CSS中的高度。我会远离表达式和其他IE黑客，我甚至不确定它们是否必要。主要问题是图像需要拉伸以适合盒子，同时保持它的纵横比。我很确定，使用

线高度

可以实现对中。我的问题是调整图像的大小。很好的链接，但它没有回答问题。如果可以的话，我会投票否决它。在未来的版本中，表达式是不推荐使用的。其他浏览器不支持。我唯一能做的垂直居中是计算父对象的大小和子对象的大小，然后设置子对象相对于父对象的位置，使其居中。如果您的目标浏览器支持最大宽度和最大重量，则它们是可以的。肖像图片顶部似乎有一个像素偏移（请参阅上一链接）。你知道为什么吗？我不是100%确定，但是文本会有点奇怪（即使没有文本）。将

div.images div.small

设置为

行高：98px

或将

font size:1%

添加到

div.images div.small img

对我来说很有效。

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