IE8 وضع غير التوافق ، الصورة مع أقصى عرض والارتفاع: تلقائي

Question

لدي صورة مع هذا الترميز

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

وأنا أستخدم CSS لتقليص حجمه إلى 600 بكسل ، مثل ذلك:

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

هل يمكن لأي شخص أن يشرح سبب عمل هذه الطريقة في وضع التوافق ، ولكن ليس في الوضع القياسي؟ هل هناك طريقة يمكنني من خلالها تعديل CSS بحيث تعمل في الوضع القياسي؟

أدرك أنه إذا قمت بتجريد

width="900" height="600"

أنه يحل المشكلة ، لكن هذا ليس خيارًا لدي.

Answer 1

لست متأكدًا من السبب الجذري ولكن إذا أضفت

width: auto;

ثم يعمل.

Answer 2

جلس width:inherit ل IE8

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

Answer 3

واو ، أنقذني الكثير من الوقت هناك!

لقد واجهت مشكلة مماثلة مع صورة في موضعها: المطلق حيث كان العرض يأخذ بطريقة سحرية القيمة القصوى. إنه غريب لأنه لا يفعل ذلك عندما لم تكن الصورة في موضعها: مطلقة.

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

يعمل بشكل رائع في IE8!

Answer 4

واو ، يا له من ألم يبدو دائمًا. على الرغم من وجود إجابة مقبولة ، فقد وجدت أنها لم تحل مشكلتي.

بعد الكثير من البحث ، وجدت أن طريقة إصلاحها هي إزالة سمات الارتفاع والعرض من الصور المعنية. يمكن العثور على شرح هنا: تحجيم الصور في IE8 مع CSS Max-Width

رمز على النحو التالي:

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

أستخدم هذا لاستهداف وظيفة تحميل صورة محددة ، ولكن يمكن إضافتها إلى أي مستند جاهز أو وظيفة تحميل نافذة أيضًا.

Answer 5

كان حلي لهذه المشكلة:

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

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

Answer 6

Max-Width من الصور تعمل بشكل جيد على IE8 عندما يكون Wrapper (Div) مباشرة.

مثال:
الصورة في هذا المثال هي 700 بكسل. عرض الويب هو 900 بكسل.

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

إذا كنت نمط:.wrapper1 { width: 50%; float: left; } // عرض هذا العمود هو 450 بكسل كحد أقصى ؛

الصورة لا تزال 700 بكسل وجعل التصميم مكسورة.

المحلول:.wrapper1 { width: 50%; float: left; } // عرض هذا العمود هو 450 بكسل كحد أقصى ؛.wrapper2 { width 100%; float: left; } // إذا كان لها حدود أو حشوة ، فإن العرض سيكون أصغر 100 ٪

ستناسب الصورة العمود (Image = 450px) عند تغيير حجم النافذة الأصغر ، فإن الصورة أصغر بناءً على عرض Wrapper2.

يعتبر،
سماء كونغ