如何使用純CSS自動調整圖像的響應設計大小？

我試圖使用CSS屬性max-width自動調整圖像大小，但它在IE7和IE8中不起作用。有沒有什麼辦法可以在IE7和IE8中用純CSS自動調整圖像大小？如何使用純CSS自動調整圖像的響應設計大小？

2011-11-18 Viduthalai

壩鎮有趣的問題....... – anglimasS

'expression'只是'javaScript'一個樣式表中，它贏得了」工作如果用戶轉動'ja'，則工作vaScript'向下。因此，你最好使用javaScript來保持你的樣式表清潔 – steveyang

是的史蒂文你是正確的，我認爲使用javscript更好，而不是使用不潔淨的CSS。 – Viduthalai

嘗試這樣：

width: expression(document.body.clientWidth > 800 ? "800px" : "auto"); 

/* If page is wider than 800px then set width to 800px, otherwise set to auto */

Source（值得考慮看看）

來源

2011-11-18 05:07:40 grc

大多數Web開發人員知道，IE已經在比賽中對標準的落後，並能夠顯示最新的和最大的。許多CSS2屬性不受支持。一些更有用的特性，如max-width，max-height，min-width，最後是min-height。試試這個：

<html> 
<style> 
p { 
border:1px solid red; 
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)? 
     "30em": 
     "auto"); 
} 
</style> 
<body> 
<p> 
[alot of text] 
</p>

來源

2011-11-18 05:08:05 kapillohakare

儘管我鄙視IE和/或MS出於不同的原因，其中之一是我必須爲IE6/7設計工作:)，我不認爲IE10「在標準競賽中落後了」。他們正在或將要回來。 – FelipeAls

您需要IE 6-7的一次性緩存表達式。

IMG { 
zoom:expression(
    function(t){ 
     t.runtimeStyle.zoom = 1; 
     var maxW = parseInt(t.currentStyle['max-width'], 10); 
     var maxH = parseInt(t.currentStyle['max-height'], 10); 
     if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) { 
      t.style.width = maxW; 
     } else if (t.scrollHeight > maxH) { 
      t.style.height = maxH; 
     } 
    }(this) 
); 
}

例子：http://kizu.ru/lib/ie/minmax.html JS源文件：http://kizu.ru/lib/ie/ie.js

作者：Roman Komarov

來源

2011-11-18 05:53:44

使用width: inherit;，使之與IE8純CSS工作。（見responsive-base.css）。像這樣：

img { 
    width: inherit; /* This makes the next two lines work in IE8. */ 
    max-width: 100%; /* Add !important if needed. */ 
    height: auto; /* Add !important if needed. */ 
}

我不知道，如果在工作IE7，請測試，並讓我們知道，如果你正在測試IE7。之前，我想通了，我用下面的jQuery的width: inherit技術，所以你可以嘗試，如果你真的需要支持到IE7和第一種方法不起作用：

<!--[if lt IE 9]><script> 
jQuery(function($) { 
    $('img').each(function(){ 
     // .removeAttr supports SSVs in jQuery 1.7+ 
     $(this).removeAttr('width height'); 
    }); 
}); 
</script><![endif]-->

來源

2012-01-12 04:34:51 ryanve

你救了我的命。謝謝！這在IE 8中完美運行。我沒有嘗試IE 7，因爲我們不必支持它。 –

@JeremyGlover真棒，是的，我知道必須有一種方法 - 我試過一堆東西，而'width：inherit'就是這樣做的。 – ryanve

不IE 7 & 8認識到以下幾點：

#my-div img 
     { 
     max-width:100%; 
     _max-width:100%; 
     }

來源

2012-04-10 11:09:39 Tracy

使用max-width: 100%與height:auto，加上width:auto爲IE8：

img 
{ 
max-width: 100%; 
height: auto; 
} 

/* Media Query to filter IE8 */ 
@media \0screen 
    { 
    img 
    { 
    width: auto; 
    } 
    }

來源

2012-12-30 16:26:24

當你還希望媒體支持queries..You可以使用下面的填充工具，爲媒體查詢的支持添加到IE6，IE8

https://github.com/scottjehl/Respond（體積很小，只是1-2kb精縮和gzip壓縮）然後使用下面的CSS：

@media screen and (min-width: 480px){ 
    img{ 
    max-width: 100%; 
    height: auto; 
    } 
}

來源

2013-01-29 07:23:04

我測試了它和每一個瀏覽器

img{ 
    height: auto; 
    max-width: 100%; 
}

來源

2015-04-19 14:22:45

如何使用純CSS自動調整圖像的響應設計大小？

回答

相關問題