Firefox 缩放图像，使其高度为 100 像素

Posted 2023-03-06

【中文标题】Firefox 缩放图像，使其高度为 100 像素

【英文标题】：Firefox scale image so that its height is 100 px

【发布时间】：2013-07-30 23:04:02

【问题描述】：

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

图像类是这样的

 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

【问题讨论】：

移除最大高度：100px？

如果你想保持纵横比，你可以像这样将宽度设置为自动***.com/questions/757782/…

@beta0x64 我希望所有图像的高度为 100 像素。查看正确的chrome截图。

@wendelbsilva 宽度是设置为auto。

您有 2 个选项，将最大宽度发送到自动或始终将图像缩放到 100 像素。要缩放到 100 像素，您需要删除 max-height 和 max-width 并将高度设置为 100 像素，将宽度设置为自动。仅当有人发布小于 100 像素的图像时，才将大小调整为 100 像素。那样的话，画质就不好了。

【参考方案1】：

嗯，我想我已经在 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 中看到的问题与 display: -moz-box 相关，正如 explained by Mozilla 一样，它会导致样式元素的子元素（例如您遇到问题的 <img> 元素）增长以填充其父元素.将定义更改为：

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

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

【参考方案2】：

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

【讨论】：

您是否实际尝试过，例如萤火虫？只保留img.image-message height:100px;padding-bottom: 2px; 是不行的。

我正在处理的项目中有类似的代码，如果答案不同，我会仔细检查并更新，但我相信这就是我所要做的

我不明白你的代码和我的代码之间的区别，但我提供的解决方案适用于我的情况。

我还有另一种情况，我没有设置任何静态高度或宽度，只放置最大值。我没有声明最小值，这种情况也适用