विभाजन की पूरी चौड़ाई को उठाए बिना बूटस्ट्रैप का उपयोग कर एक छवि को उत्तरदायी बनाने के लिए कैसे?

Question

कोई भी जिसने ट्विटर बूटस्ट्रैप का उपयोग किया है जानता है कि एचटीएमएल आईएमजी टैग में img-responsive कक्षा का उपयोग करके एक छवि को उत्तरदायी बनाया जा सकता है। हालांकि, ये छवियां विभाजन की चौड़ाई का 100% लेती हैं।

अभी भी अपनी मूल चौड़ाई रखते हुए मैं छवि को उत्तरदायी कैसे बना सकता हूं?

Answer 1

आप छवि को एक रैपर में डाल सकते हैं और रैपर को उस चौड़ाई को दे सकते हैं जिसे आप छवि चाहते हैं। एचटीएमएल

<div class="imgwrapper"> 
    <img src="img.jpg" class="img-responsive"> 
</div> 

सीएसएस

.imgwrapper { 
    width: 80%; 
} 

ऊपर सिद्धांत में अभिभावक-तत्व की चौड़ाई का imgwrapper 80% करना चाहिए, और छवि पर img-responsive स्तरीय भरना होगा पूरे रैपर ऊपर।

यदि यह आपके प्रश्न का उत्तर नहीं देता है, तो क्या आप keep original width, but make it responsive के साथ अपना मतलब थोड़ा बेहतर समझ सकते हैं? चूंकि इसे उत्तरदायी बनाने से छवि का आकार बदल जाएगा, जिसका अर्थ है कि इसकी मूल चौड़ाई नहीं होगी।

Answer 2

.img-responsive वर्ग max-width: 100%; और height: auto; लागू होता है छवि के लिए है, तो आप अपने मूल चौड़ाई रखना चाहते हैं स्पष्ट रूप से आपके img टैग की चौड़ाई विशेषता का उपयोग कर छवि की चौड़ाई सेट करना होगा।

Answer 3

आपके पास उस छवि को रखने के लिए इस्तेमाल किए जा सकने वाले माता-पिता के वास्तविक आकार को परिभाषित करने वाली छवि के चारों ओर एक रैपर होना चाहिए। यह माता-पिता div से संबंधित होगा। फिर छवि के लिए .img- उत्तरदायी लागू करें। इससे छवि को रैपर के समान चौड़ाई मिल जाएगी।

एचटीएमएल

<div class="wrapper"> 
    <img src="your-image.jpg" class="img-responsive" /> 
</div> 

सीएसएस

.wrapper { 
    width: 50%; 
} 

आप मूल आकार को बनाए रखना चाहते हैं, तो आप भी जोड़ना चाहिए (यह छोटे आकार लेकिन कभी अधिक है में बदल दिया जाएगा) एक max-width जो छवि के मूल आकार के अनुरूप होना होगा। यह 100%

.wrapper img { 
    max-width: 280px; 
} 

के मूल मान को ओवरराइट करेगा