मेरे पास मेरा img टैग कुछ सीएसएस के साथ परिभाषित है:
img
{
width: auto !important;
height: auto !important;
max-width: 100%;
}
यह मेरे द्वारा आजमाए गए कुछ मोबाइल ब्राउज़रों के साथ-साथ डेस्कटॉप पर Google क्रोम में ठीक काम करता है। हालांकि, यह आईई या फ़ायरफ़ॉक्स में काम नहीं कर रहा है। उसके द्वारा, मेरा मतलब है, जैसा कि आप विंडो का आकार बदलते हैं। मैं जिस सैंडबॉक्स साइट पर काम कर रहा हूं उस पर एक नज़र डालें: http://terraninstitute.com। मेरे पास होम पेज पर छवि है जिसे जानबूझकर एक बड़ी तस्वीर के रूप में सेट किया गया है। इसके अलावा सूचना (मुख्य मेनू) और फिर नवागंतुक (साइड मेनू) पर नेविगेट करें और नीचे मानचित्र छवि देखें। मेरे Droid (और कुछ अन्य उपकरणों पर मैं अपना हाथ प्राप्त कर सकता हूं) के साथ-साथ Google क्रोम में भी यह बहुत अच्छा लग रहा है। आईई और फ़ायरफ़ॉक्स में, इतना नहीं।
क्या मैं कुछ भूल रहा हूँ? परस्पर विरोधी शैली परिभाषाएँ? मैं उन्हें अभी तक नहीं ढूंढ रहा हूं अगर यह है।
तिया
3 जवाब
आप अपने दस्तावेज़ में अपनी छवियों की चौड़ाई को कई बार अनावश्यक रूप से घोषित कर रहे हैं और अधिकतम-चौड़ाई को गलत तरीके से घोषित कर रहे हैं। यदि आप चौड़ाई:100% के साथ अधिकतम-चौड़ाई:100% घोषित करते हैं, तो Max-width को आपकी छवियों के लिए अधिकतम आकार/सीमा निर्धारित करनी चाहिए (उदाहरण के लिए, 600px), , आप वास्तव में उस घोषणा के साथ कुछ भी नहीं कर रहे हैं क्योंकि छवियों का विस्तार 100% होगा जैसा कि यह है।
निम्नलिखित पंक्तियों में अपने सीएसएस से चौड़ाई घोषणाओं को हटा दें:
पंक्ति 116: img घोषणा को एक साथ हटाएं, इसकी आवश्यकता नहीं है।
पंक्ति 365: max-width:100% और height:auto; विशेषता को हटा दें क्योंकि उनकी आवश्यकता नहीं है (और यदि आप घोषणा को एक साथ हटा सकते हैं क्योंकि आप इसे कहीं और घोषित कर सकते हैं)
पंक्ति 121: अब बस इसी के साथ रहें और बस निम्नलिखित जोड़ें:
img {
height: auto;
width:100%;
}
प्रतिक्रियाशील छवियों के लिए बूटस्ट्रैप समाधान:
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;
}
Style.css लाइन लाइन 116, 212 और inuit.css लाइन 365 में। उन सभी को हटा दें।
img{
height: auto;
max-width: 100%;
}
आपको बस इतना ही चाहिए।