सभी ब्राउज़रों के लिए सीएसएस में छवि ऑटो चौड़ाई?

Question

मैं अपने img टैग के रूप में कुछ सीएसएस के साथ परिभाषित किया गया है:

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

यह मोबाइल ब्राउज़र्स मैं कोशिश की है में से कुछ में ठीक है, साथ ही गूगल क्रोम के रूप में एक डेस्कटॉप पर काम करता है। हालांकि, यह आईई या फ़ायरफ़ॉक्स में काम नहीं कर रहा है। इसका मतलब है, जैसा कि आप खिड़की का आकार बदलते हैं। एक सैंडबॉक्स साइट पर एक नज़र डालें जो मैं काम कर रहा हूं: http://terraninstitute.com। मेरे पास होम पेज पर छवि जानबूझकर एक बड़ी तस्वीर बनने के लिए सेट है। इसके अलावा जानकारी (मुख्य मेनू) पर नेविगेट करें (न्यूकॉमर्स) (साइड मेनू) और नीचे नक्शा छवि को नोटिस करें। मेरे Droid (और कुछ अन्य डिवाइसों पर मैं अपना हाथ प्राप्त कर सकता हूं) साथ ही Google क्रोम में यह बहुत अच्छा लग रहा है। आईई और फ़ायरफ़ॉक्स में, इतना नहीं।

क्या मुझे कुछ याद आ रही है? विवादित शैली परिभाषाएं? मैं उन्हें अभी तक नहीं ढूंढ रहा हूं यदि यह है।

TIA

Answer 1

आप अनावश्यक रूप से अपने दस्तावेज़ में आपकी छवियों की चौड़ाई कई बार घोषणा कर रहे हैं और एक अधिकतम की घोषणा गलत रास्ता बताओ। Max-width को आपकी छवियों के लिए अधिकतम आकार/सीमा परिभाषित करना है (उदाहरण के लिए 600 पीएक्स), यदि आप अधिकतम-चौड़ाई घोषित करते हैं: 10012चौड़ाई के साथ संयोजन में: 100%, आप वास्तव में इसके साथ कुछ भी नहीं कर रहे हैं घोषणा के रूप में छवियों के रूप में 100% का विस्तार होगा।

निम्नलिखित लाइनों में अपने सीएसएस से चौड़ाई घोषणाओं निकालें:

लाइन 116: img घोषणा सब एक साथ हटाने के लिए, यह आवश्यक नहीं है।

लाइन 365: के रूप में वे आवश्यक नहीं हैं max-width:100% और height:auto; विशेषता निकाल सकते हैं (और आप सभी को एक साथ घोषणा नष्ट कर सकते हैं, तो के रूप में आप घोषणा कर सकते हैं कहीं और है कि)

लाइन 121: अब बस इस एक के साथ और बस छड़ी निम्नलिखित जोड़ें:

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

Answer 2

!important

का प्रयोग न करें अपने सीएसएस अधिक speficic करें:

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

Answer 3

style.css लाइन लाइन 116, 212 और inuit.css लाइन 365 में। उन सभी को हटा दें।

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

आपको जो चाहिए वह सब कुछ है। उत्तरदायी छवियों के लिए

Answer 4

Bootstrap समाधान:

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 

    /* Part 1: Set a maxium relative to the parent */ 
    max-width: 100%; 

    /* IE7-8 need help adjusting responsive images */ 
    width: auto\9; 

    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    height: auto; 

    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}