javascript - 如何使用 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;
}

你可以看到一个样本 here .

不幸的是，我的风景图像占据了框的顶部，而我希望它们居中。另外，我不确定依赖 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 等)是“内联 block ”——这意味着它们像文本一样内联流动，但具有宽度和高度。