1

我正在将各种尺寸和尺寸的图像加载到我的网站中。Chrome、Opera 和 Safari 都可以拉伸图像，使其看起来不会不自然地拉伸或倾斜。Firefox 保留原始图像的宽度并将图像高度设置为 100px。这会产生和50x100图像。 在左侧您可以看到 Chrome，在右侧您可以看到 Firefox。我希望所有图像的高度都为 100 像素。150x1002000x100在此处输入图像描述

图像类看起来像这样

 img.image-message {
        padding-bottom: 2px;
        height: auto;
        width: auto;
        max-height: 100px;
        max-width: 100%;
    }

仅设置height并且width不会改变任何事情：

 img.image-message {
        padding-bottom: 2px;
        height: 100px;
        width: auto;
    }

在metahill.com查看实时示例。您可以使用此用户登录：

Username: test_t
Password: meta_hill_t
4

2 回答 2

3

嗯，我想我已经在 CSS 中确定了您问题的根源。它实际上并不是<img>元素的直接样式，这就是很难确定的原因。它在于chat.css中的这个定义：

#chat .chat-entry > .chat-entry-message {
    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    display:box;
    padding: 3px;
    word-wrap: break-word;
}

您在 Firefox 中看到的问题与Mozilla 所解释的display: -moz-box有关，它会导致样式元素的子元素（例如您遇到问题的元素）增长以填充其父元素。将定义更改为：<img>

#chat .chat-entry > .chat-entry-message {
    display: block;
    padding: 3px;
    word-wrap: break-word;
}

将解决观察到的问题，但我不确定是否所有这些变体display: box都是出于其他目的。（所以我不能说这个修复是否会影响其他任何东西。）无论如何，希望这就是你想要的！如果没有，请告诉我，我很乐意尝试进一步提供帮助！

于 2013-07-30T17:28:15.227 回答
1

将高度设置为 100 像素，而不是最大高度。除非特别声明，否则宽度将自动跟随高度。

于 2013-07-30T17:09:52.620 回答