web-dev-qa-db-ja.com

IE8非互換モード、max-widthおよびheight：autoの画像

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

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

そして、私はCSSを使って600px幅に縮小しています：

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

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

私が気づいたら

width="900" height="600"

それは問題を解決するが、それは私が持っているオプションではありません。

internet-explorer-8csscompatibility-mode
32
Jared Henderson

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

width: auto;

それは動作します。

73
Greg

セットする width:inherit ie8の場合

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }
7
Vicky

わあ、そこで時間を大幅に節約できました！

私は同様の問題を抱えていました。画像の位置：絶対に幅が最大幅の値を取っている絶対的な場所。奇妙なのは、画像が適切な位置になかったときは絶対に動かないからです。

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

iE8でうまく機能します！

4
user545493

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

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

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

CSS：

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

[〜＃〜] script [〜＃〜]

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

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

2
Russell Shingleton

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

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

<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の幅に基づいて画像は小さくなります。

よろしく、
Cuong Sky

0
Cuong Sky

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

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

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