32

このマークアップの画像があります

<img src="wedding_00.jpg" width="900" height="600" />

そして、CSSを使用して600px幅に縮小しています。

img {
    max-width:600px;
    height:auto;
}

この方法が互換モードでは機能するが、標準モードでは機能しない理由を誰かが説明できますか？標準モードで動作するようにCSSを変更する方法はありますか？

私が取り除くと

width="900" height="600"

それが問題を解決するということですが、それは私が持っている選択肢ではありません。

4

6 に答える 6

73

根本的な原因はわかりませんが、追加すると

width: auto;

その後、それは動作します。

于 2009-11-20T15:28:52.753 に答える
7

width:inheritIE8用に設定

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }
于 2013-05-02T15:05:47.633 に答える
4

うわー、そこで多くの時間を節約できました！

私は位置にある画像で同様の問題を抱えていました：幅が魔法のように最大幅の値を取っている絶対値。画像が所定の位置にないときはそれを行わないので、それは奇妙です：絶対。

width: auto; 
max-width: 200px; 
height: auto; 
max-height: 200px;

IE8でうまく機能します！

于 2010-12-17T00:27:34.323 に答える
2

うわー、IEはいつもどんなに苦痛なようです。受け入れられた答えがありますが、それは私の問題を解決しなかったことがわかりました。

多くの検索の結果、それを修正する方法は、問題の画像から高さと幅の属性を削除することであることがわかりました。説明はここにあります：CSSmax-widthを使用したIE8での画像のスケーリング

コードは次のとおりです。

CSS：

.entry img {
    max-width:615px
    height:auto;
}

脚本

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( 'width' );
    if ( 615 < w ) {
        imgs[i].removeAttribute( 'width' );
        imgs[i].removeAttribute( 'height' );
    }
}

現在、私は可能な限りjQueryを使用する傾向があります。これを解決するために、いくつかの異なる関数を使用してIE8をターゲットにし、作業を楽にしました。また、ソリューションはほぼ機能しましたが、完全には機能しなかったことがわかりました。探していた結果が得られるまで、それをいじってみました。私の解決策は次のとおりです。

JQUERY：

var maxWidth = 500;

function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
    return true;
}   
    return false;
}


if(badBrowser()){
    $('img').each(function(){
        var height = $(this).height();
        var width = $(this).width();
        if (width > maxWidth) {

            var ratio = (maxWidth /width)  
            $(this).css({
                "width":maxWidth,               
                "height":(ratio*height)
            });
            $(this).removeAttr('width'); 
            $(this).removeAttr('height');
        }else{
            $("#cropimage").css({
                "width":width,               
                "height":height
            });
        }
    });       
}

これを使用して特定の画像読み込み機能をターゲットにしますが、ドキュメントレディまたはウィンドウ読み込み機能にも追加できます。

于 2012-03-16T01:06:56.763 に答える
0

この問題に対する私の解決策は次のとおりです。

  <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->
于 2010-06-10T11:11:10.393 に答える
0

画像のmax-widthは、直接ラッパー（div）に幅がある場合、IE8で正常に機能します。

例：
この例の画像は700pxです。ウェブの幅は900pxです。

<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>

スタイルを設定する場合： .wrapper1 { width: 50%; float: left; }//この列の幅は最大450pxです。

画像はまだ700pxで、レイアウトが壊れています。

解決策： .wrapper1 { width: 50%; float: left; }//この列の幅は最大450pxです。 .wrapper2 { width 100%; float: left; }//境界線またはパディングがある場合、幅は100％小さくなります

ウィンドウのサイズを小さくすると、画像は列（image = 450px）に収まり、wrapper2の幅に基づいて画像が小さくなります。

よろしく、
クオンスカイ

于 2012-12-31T04:28:39.197 に答える