मैंने सीएसएस संपत्ति max-width का उपयोग कर छवि का आकार बदलने का प्रयास किया है, लेकिन यह आईई 7 और आईई 8 में काम नहीं करता है। आईई 7 और आईई 8 में शुद्ध सीएसएस के साथ छवि का आकार बदलने का कोई तरीका है? इस तरहशुद्ध सीएसएस के साथ उत्तरदायी डिजाइन के लिए छवि का आकार बदलने का तरीका कैसे बदलें?
कोशिश कुछ:
width: expression(document.body.clientWidth > 800 ? "800px" : "auto");
/* If page is wider than 800px then set width to 800px, otherwise set to auto */
अधिकांश वेब-डेवलपर्स पता है कि आईई मानकों की दौड़ में पीछे गिर गया है और नवीनतम दिखाने के लिए सक्षम किया जा रहा (पर एक नज़र लेने लायक) और महानतम। कई सीएसएस 2 गुण असमर्थित हैं। कुछ अधिक उपयोगी, अधिकतम-चौड़ाई, अधिकतम-ऊंचाई, न्यूनतम-चौड़ाई और अंत में न्यूनतम ऊंचाई जैसी गुण हैं। इस प्रयास करें:
<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>
हालांकि मैं विभिन्न कारणों से आईई और/या एमएस को तुच्छ मानता हूं, उनमें से एक यह है कि मुझे आईई 6/7 के लिए डिज़ाइन का काम करना पड़ा था, मुझे नहीं लगता कि आईई 10 "मानक के लिए दौड़ में पीछे आ गया है"। वे वापस आ जाएंगे या वापस आ जाएंगे। – FelipeAls
आप आईई 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 जे एस स्रोत फ़ाइल: http://kizu.ru/lib/ie/ie.js
लेखक: Roman Komarov
उपयोग width: inherit; यह IE8 में शुद्ध सीएसएस के साथ काम करने के लिए। (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 परीक्षण कर रहे हैं तो हमें बताएं। इससे पहले कि मैं width: inherit तकनीक मैं नीचे jQuery उपयोग कर रहा था पता लगा, इसलिए यदि आप वास्तव में IE7 और पहली तकनीक के लिए नीचे का समर्थन काम नहीं करता है की जरूरत है आप इसे आज़मा सकते हैं:
<!--[if lt IE 9]><script>
jQuery(function($) {
$('img').each(function(){
// .removeAttr supports SSVs in jQuery 1.7+
$(this).removeAttr('width height');
});
});
</script><![endif]-->
आपने अपना जीवन बचाया। धन्यवाद! यह आईई 8 में पूरी तरह से काम किया। मैंने आईई 7 में कोशिश नहीं की क्योंकि हमें इसका समर्थन नहीं करना है। –
@ जेरेमी ग्लोवर बहुत बढ़िया, हाँ मुझे पता था कि वहां एक रास्ता होना था-मैंने चीजों का एक गुच्छा करने की कोशिश की और 'चौड़ाई: वारिस' चाल क्या है। – ryanve
करता नहीं IE 7 & 8 पहचान निम्नलिखित:
#my-div img
{
max-width:100%;
_max-width:100%;
}
IE8 के लिए उपयोग height:auto साथ max-width: 100%, प्लस width:auto:
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media \0screen
{
img
{
width: auto;
}
}
आप भी मीडिया के लिए समर्थन queries..You IE6-IE8 करने के लिए मीडिया के प्रश्नों के लिए समर्थन जोड़ने के लिए निम्न polyfill उपयोग कर सकते हैं चाहता हूँ के रूप में
https://github.com/scottjehl/Respond (आकार में बहुत छोटा सिर्फ न्यूनतम किया गया 1-2kb और Gzipped) तो का उपयोग निम्नलिखित सीएसएस:
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
मैं इसे और हर ब्राउज़र
img{
height: auto;
max-width: 100%;
}
Nanba अच्छा सवाल ....... – anglimasS
'expression' सिर्फ' javaScript' एक स्टाइलशीट अंदर, यह जीता कर रहे हैं 'के लिए काम कर परीक्षण किया यदि उपयोगकर्ता बदलता है तो टी काम करता है vaScript' नीचे। इस प्रकार आप अपनी स्टाइलशीट को साफ रखने के लिए जावास्क्रिप्ट का बेहतर उपयोग करेंगे – steveyang
हाँ स्टीवन आप सही हैं, मुझे लगता है कि जावा सीस्क्रिप्ट का उपयोग अशुद्ध सीएसएस का उपयोग करने के बजाय बेहतर है। – Viduthalai