IE8 非互換モード、最大幅と高さの画像:自動

StackOverflow https://stackoverflow.com/questions/1771176

質問

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

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

そして、次のようにCSSを使用して幅600ピクセルに縮小しています。

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

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

剥がしてみると分かりますが、 

width="900" height="600"

それで問題は解決すると思いますが、それは私にできる選択肢ではありません。

役に立ちましたか？

解決

私は確かに根本的な原因のないんだけど、あなたは

を追加した場合 
width: auto;

それが動作します。

他のヒント

IE8

のために設定しwidth:inherit 
 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }

うわー、私はそこに多くの時間を保存！

絶対幅が魔法の最大幅の値を取っていた。

iが位置における画像と同様の問題がありました。その奇妙なことは行いませんので、そのイメージは、位置になかったとき：。絶対

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

IE8で素晴らしい作品！

うわー、IE はいつも面倒に思えます。受け入れられた答えがありますが、それが私の問題を解決していないことがわかりました。

何度も検索した結果、問題を修正する方法は、問題の画像から高さと幅の属性を削除することであることがわかりました。説明は次のとおりです。 CSS max-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 をターゲットにして作業を楽にするためにいくつかの異なる関数を使用しました。また、この解決策はほぼ機能しましたが、完全には機能していないこともわかりました。探していた結果が得られるまで、いろいろ試してみました。私の解決策は次のとおりです。

Jクエリ:

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
            });
        }
    });       
}

私はこれを特定の画像ロード関数を対象とするために使用しますが、ドキュメント準備機能やウィンドウロード関数にも同様に追加できます。

この問題について私のソリューションでした。

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

        }
  </style>
  <![endif]-->

画像の最大幅IE8上だけでの作業罰金、それが直接のラッパーだ（DIV）は幅を持っています。

例：
この例では画像は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％

小さいサイズ変更ウィンドウ、画像が小さいwrapper2の幅に基づいてます。

の列に合う画像（画像= 450px）。

よろしく、
クオン・スカイ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top