69

以下代码在 Chrome 或 IE 中正确显示（图像为 200px 宽）。在 Firefox 和 Opera 中，max-width样式被完全忽略。为什么会发生这种情况，是否有好的解决方法？另外，大多数标准符合哪种方式？

笔记

针对这种特殊情况的一种可能解决方法是设置max-width为200px. 然而，这是一个相当人为的例子。我正在寻找可变宽度容器的策略。

<!doctype html>
<html>
<head>
    <style>
        div { display: table-cell; padding: 15px; width: 200px; }
        div img { max-width: 100%; }
    </style>
</head>
<body>
    <div>
        <img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
            ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
            at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            leo metus, aliquam eget convallis eget, molestie at massa.
        </p>
    </div>
</body>
</html>

[更新]

正如下面mVChr所述，w3.org 规范声明max-width不适用于inline元素。我试过使用div img { max-width: 100%; display: block; }，但它似乎并没有解决问题。

[更新]

我仍然没有解决这个问题。但是，我正在使用以下 javascript hack 来解决我的问题。本质上，它重新创建了上述情况并检查浏览器是否支持max-width. display: table-cell（使用数据 uri 可以防止额外的 http 请求。下面是 3x3 bmp。）

jQuery( function ( $ ) {

    var img = $( "<img style='max-width:100%' src='" +
    "data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
    "AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
    "/wAAAAAAwAAAAKAAAAA%3D" +
    "'>" )
    .appendTo(
        $( "<div style='display:table-cell;width:1px;'></div>" )
        .appendTo( "body" )
    );
    $.support.tableCellMaxWidth = img.width() == 1;
    img.parent().remove();

});
4

9 回答 9

120

您需要做的是将您的包装器 div（带有 的display: table-celldiv ）放入另一个具有display: table and table-layout: fixed的 div 中。这使得 Firefox 和 Opera 都遵守max-width规则。

请参阅jsFiddle 上的此示例。

于 2012-07-03T11:48:12.040 回答
31

w3.org规范声明 max-width 不适用于内联元素，因此您将在浏览器中获得不一致的行为。我不确定您的预期结果，但如果您设置div img { display:block }然后将imgandp标记与浮动而不是标准内联对齐，您可能会实现它。

于 2010-05-27T18:55:11.320 回答
0

我通过使用width: 100%而不是max-width: 100%.

于 2013-01-24T14:44:57.860 回答
0

设置 width: 100% 确实解决了这个问题，但它引入了另一个问题。在 WordPress 中，您不想将 width: 100% 设置为图像。如果图像是中等大小，宽度为 300 像素，那会怎样？我一直在使用类将中等大小的宽度设置为 50%，但是如果图像更小怎么办？然后它会被拉伸。在 webkit 浏览器中，它适用于 width: auto; 最大宽度：100%；但由于 Firefox、Opera 和 IE 忽略了这一点……这是一个大问题。

于 2013-06-22T00:06:10.477 回答
0

这已经成为一个非常混乱的话题......

Max-width 不适用于行内元素，也不适用于表格单元格元素。如果图像的显示设置为阻止，它确实可以处理图像，但什么是 100%？在表格布局中，单元格的内容会推动列宽以尽可能容纳所有内容。所以 max-width:100%，在大多数情况下，表格单元格内最终是内容的自然宽度。

这就是为什么以像素为单位设置图像的 max-width 属性有效的原因：

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>

table-layout: fixed，正如 Alex 所建议的，如果图像不在表格的第一行中，可能会起作用，因为第一行的内容决定了列宽。

于 2014-03-19T03:06:00.360 回答
0

对于特定情况，我在网上偶然发现了另一种解决方法：如果您使用display: table;+display: table-cell;来模拟响应式站点中的两列（或更多）列布局，请尝试这样做：给侧边栏提供 350 像素的宽度和主网站的内容部分宽度像width: calc(100% - 360px);. 这对我有用，而且我需要一个固定宽度的侧边栏。我猜这也适用于 em 的。

当然，这是依赖于 js 的，但现在应该已经可以了。

于 2015-05-13T18:53:39.070 回答
-1

您是否尝试过为图像添加位置属性？img {position:relative;}? 它应该符合父元素。

于 2010-06-08T16:57:38.273 回答
-1

添加float: left到 div css

于 2010-06-03T20:15:58.450 回答
-3

我有同样的问题。我通过这样做解决了它：

在 Opera 和 Fi 中测试

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
于 2014-12-10T10:26:11.293 回答