कैसे एक उत्तरदायी छवि बनाने के लिए जो भी बूटस्ट्रैप 3 में तराजू

Question

मैं वर्तमान में ट्विटर बूटस्ट्रैप 3 का उपयोग कर रहा हूं और उत्तरदायी छवि बनाने के लिए मैं एक समस्या का सामना कर रहा हूं। मैंने img-responsiveक्लास का इस्तेमाल किया है । लेकिन छवि का आकार नहीं बढ़ रहा है। अगर मैं width:100%इसके बजाय उपयोग max-width:100%करता हूं तो यह पूरी तरह से काम करता है। समस्या कहाँ हे? यह मेरा कोड है:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Answer 1

बूटस्ट्रैप का उत्तरदायी छवि वर्ग max-width100% पर सेट होता है। यह इसके आकार को सीमित करता है, लेकिन इसे छवि से बड़े माता-पिता के तत्वों को भरने के लिए खिंचाव के लिए मजबूर नहीं करता है। आपको widthअपसंस्कृति को मजबूर करने के लिए विशेषता का उपयोग करना होगा ।

http://getbootstrap.com/css/#images-responsive

Answer 2

पक्की बात!

.img-responsive बूटस्ट्रैप 3 के साथ छवियों को उत्तरदायी बनाने का सही तरीका है। आप जिस तस्वीर को उत्तरदायी बनाना चाहते हैं, उसके लिए कुछ ऊंचाई नियम जोड़ सकते हैं, क्योंकि जिम्मेदारी के साथ, ऊँचाई के साथ चौड़ाई में परिवर्तन होता है, इसे ठीक करें और आप वहीं हैं।

Answer 3

निश्चित नहीं है कि यह अभी भी आपकी मदद करता है ... लेकिन मुझे छवि को बड़ा बनाने के लिए एक छोटी सी चाल चलनी थी, लेकिन इसे उत्तरदायी बनाए रखना

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

आशा है कि यह पीएस में मदद करता है अधिकतम चौड़ाई आप की तरह कुछ भी हो सकता है

Comments

यह एक छवि को अपने मूल आकार से व्यापक प्रदर्शित करने का कारण नहीं बनता है।

— isherwood

Answer 4

यदि छवि पर एक निश्चित चौड़ाई सेट करना एक विकल्प नहीं है, तो यहां एक वैकल्पिक समाधान है।

डिस्प्ले के साथ पैरेंट डिव होना: टेबल और टेबल-लेआउट: फिक्स्ड। फिर छवि को प्रदर्शित करने के लिए सेट करें: तालिका-सेल और अधिकतम-चौड़ाई 100%। इस तरह से छवि अपने माता-पिता की चौड़ाई पर फिट होगी।

उदाहरण:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

फिडल: http://jsfiddle.net/5y62c4af/

Answer 5

अपने CSS स्टाइलशीट में निम्नलिखित को आज़माएँ:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Answer 6

ऐसा करने की कोशिश करें:

1) अपने index.html में

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) अपने style.css में

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Answer 7

मैंने पाया कि आप .col वर्ग को छवि पर रख सकते हैं - चाल चलेगा, हालांकि इससे अतिरिक्त अतिरिक्त ग्रेडिंग के साथ-साथ वर्ग से जुड़े अन्य गुण जैसे कि फ्लोट बचे रहते हैं, हालाँकि ये कहकर रद्द किया जा सकता है उदाहरण के लिए कोई पेडिंग नहीं एक अतिरिक्त के रूप में वर्ग।

Answer 8

मुझे लगता है कि छवि भ्रष्ट है। उदाहरण: छवि का आकार 195px X 146px है।

यह गोलियों की तरह कम प्रस्तावों के अंदर काम करेगा। जब आपके पास 1280 X 800 रिज़ॉल्यूशन होगा तो यह बड़ा होगा क्योंकि इसमें चौड़ाई 100% भी है। शायद आइकन फोंट की तरह मीडिया के अंदर सीएसएस सबसे अच्छा समाधान है।