जिम्मेदारियों को आकार देने वाली छवियों के साथ समस्याएँ - html, css, html5, css3

मेरे सीएसएस को पाती है कि मैं अपने img सिंटैक्स के लिए है। हालाँकि, इसे ब्राउज़र के आकार बदलने के दौरान जिम्मेदारी से आकार बदलना चाहिए। यह क्रोम में काम करता है, लेकिन IE & FIREFOX किसी कारण से "काम नहीं कर रहा है" - क्या कोई कारण है कि? मैं सभी के नवीनतम का उपयोग कर रहा हूं।

img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}

उत्तर:

Img अधिकतम-चौड़ाई: उत्तरदायी छवियों के लिए 100% एक अच्छी तकनीक है, लेकिन इसे छवि कंटेनर के साथ मिलकर काम करने की आवश्यकता है - तत्व जो छवि को रखता है / लपेटता है - इसके लिए आपको कार्रवाई में प्रतिक्रिया देखने के लिए।

इसे आज़माएं और आपको इसे पार करने वाले ब्राउज़र पर काम करना चाहिए:

<div class="imgHolder">
<img src="/images/http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>

तो आपकी छवि एक div के साथ लिपटी हुई है। और सीएसएस होगा:

.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}

.imgHolder img {
max-width: 100%
}

आप कोडपेन की जांच कर सकते हैं यहाँ