9

我有一堆图像，它们都适合一个 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;
}

您可以在此处查看示例。

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

如何在这些框中将我的图像居中？

4

5 回答 5

12

我在我的电脑上设置了这个，它工作得很好。查看您的示例页面后，问题是因为您已将图像设置为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” - 这意味着它们像文本一样内联流动，但具有宽度和高度。

于 2009-08-24T16:07:59.500 回答
1

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

它按预期对我有用。

于 2009-08-24T15:14:15.110 回答
1

我曾经遇到过这个垂直居中问题，为了让它在所有浏览器中都能正常工作，我求助于 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。

于 2009-08-24T17:19:53.693 回答
0

您是否尝试过使用：

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

应该以块级元素为中心

于 2009-08-24T15:01:33.273 回答
0

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

把你<img>放在里面 a <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;
}
于 2013-12-18T07:33:24.867 回答