छवियों का आकार बूटस्ट्रैप कॉलम आकार

Question

पर आधारित नहीं है मेरा लक्ष्य प्रति पंक्ति 4 छवियां प्रदर्शित करना है। नीचे दिए गए कोड:

<div class="row"> 
    <div class="col-md-3 col-sm-4 col-xs-6"> 
     <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a> 
    </div> 
    <div class="col-md-3 col-sm-4 col-xs-6"> 
     <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a> 
    </div> 
    <div class="col-md-3 col-sm-4 col-xs-6"> 
     <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a> 
    </div> 
    <div class="col-md-3 col-sm-4 col-xs-6"> 
     <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a> 
    </div>                      
</div> 

और मैं बूटस्ट्रैप से स्तंभ शैली के आधार पर आकार दिया तस्वीरें देखने भी उम्मीद है, लेकिन क्या मैं हो रही है पूर्ण छवियों अतिव्यापी हैं।

कोई संकेत क्या चल रहा है?

Answer 1

अपने स्टाइलशीट को यह जोड़ने का प्रयास करें:

img { 
    width: 100%; 
} 

अद्यतन: एक विकल्प के रूप (के रूप में @JasonAller द्वारा इस उत्तर की टिप्पणी में बताया), आप प्रत्येक img तत्व को class="img-responsive" जोड़ सकते हैं। यह छवि पर max-width: 100%; और height: auto; लागू होता है ताकि यह मूल तत्व के लिए अच्छी तरह से स्केल हो। अधिक जानकारी के लिए Bootstrap docs देखें।

Answer 2

कभी-कभी गतिशील सामग्री पर जब आपके पास उपयोगकर्ता द्वारा रखे गए नियंत्रण पर कोई नियंत्रण नहीं होता है, तो वर्ग = "img-responsive" काम नहीं करेगा। और प्रत्येक छवि के लिए 'चौड़ाई: 100%' भी मुश्किल है। इसलिए मैं उपयोग कर रहा हूँ:

img {max-width: 100%;} 

Answer 3

बूटस्ट्रैप 4 के साथ आप उपयोग वर्ग = "img-तरल पदार्थ" का उपयोग करना चाहिए, वर्ग = "img संवेदनशील" 3.x. में काम करेंगे

Answer 4

सावधान रहें कि बूटस्ट्रैप कॉलम में पैडिंग भी है; यह अप्रत्याशित हो सकता है।

निम्नलिखित:

div class="col-sm-6" style="padding:0" 

मेरे लिए काम किया।

Answer 5

आप चाहते हैं, तो आप चौड़ाई टैग HTML तत्व में, उदाहरण के लिए उपयोग कर सकते हैं:

<img width="60%" src="..."> 

मैं इसे और अधिक उपयोगी पाते हैं, जब तक आप इच्छित आकार है जब से तुम प्रतिशत के साथ खेल सकते हैं।