ट्विटर बूटस्ट्रैप में छवि को उत्तरदायी कैसे रोकें?

Question

मैं उत्तरदायी लेआउट बनाने के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं। यह कमाल की तरह काम करता है।

यह छवियों को बहुत उत्तरदायी बनाता है। मुझे कुछ छवियों की आवश्यकता है केवल चौड़ाई और ऊंचाई तय करने की आवश्यकता है।

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div> 

मैं इसे कैसे बना सकता हूं?

Answer 1

अंत में काम किया।

.fixed_width { 
    height: 40px; 
    width: 50px; 
} 

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div> 

Answer 2

एक नई कक्षा बनाएं और उस छवि की चौड़ाई और ऊंचाई के बराबर न्यूनतम ऊंचाई और न्यूनतम चौड़ाई सेट करें जिसे आप हटाना नहीं चाहते हैं, और उस वर्ग को उन छवियों में जोड़ें।

उदाहरण के लिए।

/* css */ 
img.no-resize { 
    min-height: 40px; 
    min-width: 50px; 
} 

/* html */ 

<div class="span1"> 
    <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"> 
</div> 

Answer 3

अपने कोड की जांच करें कि छवि के चौड़ाई और ऊंचाई गुण स्थापित करने से like you did यह काम नहीं कर रहा बनाने के लिए और वहाँ ठीक करने के लिए स्टाइल में एक हस्तक्षेप है:

<div class="span1"> 
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" /> 
</div> 

आपकी छवि के साथ आकार बदलने के लिए माना जाता नहीं है बूटस्ट्रैप यदि आप सही ढंग से चौड़ाई और ऊंचाई विशेषताओं को भरते हैं। इनलाइन गुणों में सीएसएस पर प्राथमिकता है।

अन्यथा, आप bootstrap.css से img स्टाइल को ओवरराइट करना

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 
    max-width: 100%; 
    /* Part 1: Set a maxium relative to the parent */ 
    width: auto\9; 
    /* IE7-8 need help adjusting responsive images */ 
    height: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

अपनी विशिष्टताओं के साथ एक सीएसएस चयनकर्ता बनाएँ (लाइन ~ 68 संस्करण 2.0।):

/* css */ 
.max-resize-50x40 { 
    max-height: 40px; 
    max-width: 50px; 
} 
.resize-50x40 { 
    height: 40px; 
    width: 50px; 
} 

Answer 4

यहां तक ​​कि सरल, आपको छवि में केवल एक सामान्य वर्ग जोड़ने में सक्षम होना चाहिए ताकि आप इसे एकाधिक छवि आकारों पर उपयोग कर सकें ...

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto; width: auto; } 

मैंने इसे आईई में नहीं देखा है लेकिन यह सफारी, एफएफ और क्रोम पर काम करता है।

Answer 5

जवाब @atype मैं के रूप में डाल द्वारा पोस्ट किए जोड़ने के लिए इस प्रकार है:

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto !important; width: auto !important; }