69

次のコードは、ChromeまたはIEで正しく表示されます（画像の幅は200ピクセルです）。FirefoxとOperaでは、max-widthスタイルは完全に無視されます。なぜこれが発生し、適切な回避策がありますか？また、ほとんどの標準に準拠しているのはどちらの方法ですか？

ノート

この特定の状況で考えられる回避策の1つは、に設定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ハックを使用しています。基本的に、上記の状況を再現し、ブラウザが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-cellを持っている別のdivの中に置くことです。これにより、FirefoxとOperaの両方がルールを尊重します。display: table table-layout: fixedmax-width

jsFiddleでこの例を参照してください。

于 2012-07-03T11:48:12.040 に答える
31

w3.orgの仕様では、max-widthはインライン要素には適用されないため、ブラウザー間で一貫性のない動作が発生することが規定されています。意図した結果はわかりませんが、タグとタグを標準のインラインではなくフロートに設定div img { display:block }して配置すると、達成できる可能性があります。imgp

于 2010-05-27T18:55:11.320 に答える
0

width: 100%の代わりにを使用して動作させましたmax-width: 100%。

于 2013-01-24T14:44:57.860 に答える
0

幅を100％に設定すると問題は解決しますが、別の問題が発生します。WordPressでは、画像の幅を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

特定のケースでは、私が誤ってオンラインで見つけた別の回避策があります。レスポンシブサイトで2列（またはそれ以上）のレイアウトを模倣するためにdisplay: table;+display: table-cell;を使用する場合は、代わりにこれを試してください。サイトのコンテンツ部分の幅はwidth: calc(100% - 360px);。それは私にとってトリックでした、そしてボーナスは私が固定幅のサイドバーを必要としたことでした。私はそれがemでもうまくいくと思います。

もちろん、これはjsに依存しますが、最近は大丈夫です。

于 2015-05-13T18:53:39.070 に答える
-1

float: leftdivcssに追加

于 2010-06-03T20:15:58.450 に答える
-1

画像に位置プロパティを追加してみましたか？img {position:relative;}？親要素に準拠している必要があります。

于 2010-06-08T16:57:38.273 に答える
-3

私も同じ問題を抱えていました。私はこれを行うことによってそれを解決しました：

OperaとFiでテスト済み

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