समायोजन और छवि आकार एक div (बूटस्ट्रैप) फिट करने के लिए

Question

मैं एक विशिष्ट आकार के भीतर फिट होने के लिए एक छवि प्राप्त करने की कोशिश कर रहा हूं। दुर्भाग्य से, छवि इसके अनुरूप नहीं है और इसके बजाय आनुपातिक रूप से एक ऐसे आकार में सिकुड़ रही है जो काफी बड़ा नहीं है। मुझे यकीन नहीं है कि इसके अंदर फिट होने के लिए सबसे अच्छा तरीका क्या है।

यदि यह पर्याप्त कोड नहीं है, तो मुझे अधिक आपूर्ति करने में खुशी होगी, और मैं किसी भी अन्य त्रुटियों को ठीक करने के लिए खुला हूं जो मैं देख रहा हूं।

यहाँ HTML है

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

मेरा सीएसएस

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

Comments

मैंने यहां एक ऐसे ही प्रश्न का उत्तर पोस्ट किया है: stackoverflow.com/questions/41870216/…

— FredyWenger

Answer 1

आप स्पष्ट रूप से widthऔर heightछवियों को परिभाषित कर सकते हैं , लेकिन परिणाम सबसे अच्छा नहीं लग सकता है।

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

---

... आपकी टिप्पणी के अनुसार, आप भी किसी भी ब्लॉक कर सकते हैं overflow- इस उदाहरण को ऊंचाई से प्रतिबंधित एक छवि को देखने के लिए देखें और काट दें क्योंकि यह बहुत चौड़ा है।

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

Comments

मैंने ऐसा करते हुए देखा, दुर्भाग्य से जैसे आपने कहा, परिणाम सबसे अच्छे नहीं हैं। आदर्श रूप से, मैं चाहूंगा कि छवियां सिकुड़ जाएं ताकि छवि की ऊंचाई div की ऊंचाई पर फिट हो, और छवि की चौड़ाई जो विवश div की चौड़ाई से अधिक हो, छिपी होगी। अगर वह

— सेन्स

हाँ, यही मैं ढूंढ रहा हूँ! आपको बहुत - बहुत धन्यवाद!

— मुस्कानफ्रीक 24

अन्य उत्तर सबसे अच्छा एक है, बस वर्ग = "img- उत्तरदायी" को जोड़ने के लिए img टैग चाल करता है!

— iMOBio

से बेहतर width:100%;है max-width:100%;और बेहतर है कि वे सभी img-responsiveबीएस 3 या बीएस 4 में वर्ग हैं img-fluid।

— नबी

Answer 2

इस तरह आजमाएं:

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

अपडेट करें:

में बूटस्ट्रैप 4 img-responsiveहो जाता है img-fluid, इसलिए बूटस्ट्रैप 4 का उपयोग समाधान है:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

Comments

ठंडा! class = "img-responsive" ने मदद की। शायद यह आज का स्वीकृत जवाब होना चाहिए।

— अनुपम

class = "img-responsive" निश्चित रूप से जाने का रास्ता है! यह स्वीकृत उत्तर होना चाहिए।

— iMobio

यह img-fluidअब है, नहींimg-responsive

— wordsforthewise

Answer 3

बस एक हेड अप जो बूटस्ट्रैप 4 का अब उपयोग करता img-fluidहैimg-responsive , इसलिए यदि आप समस्या कर रहे हैं तो किस संस्करण का उपयोग कर रहे हैं, इसकी दोहरी जांच करें।

Comments

img-fluidक्या यह ! धन्यवाद !

— प्याऊ

Answer 4

बस img-responsiveअपने imgटैग में क्लास जोड़ें , यह बूटस्ट्रैप 3 पर लागू होता है!

Comments

क्षमा करें, लेकिन क्या आप कृपया विशिष्ट हो सकते हैं, मुझे आपका प्रश्न ठीक से नहीं मिल रहा है, धन्यवाद!

— शशि

Answer 5

मेरे पास यही समस्या थी और निम्नलिखित सरल समाधान पर ठोकर खाई। बस छवि में थोड़ा सा पैडिंग जोड़ें और यह div के भीतर फिट होने के लिए खुद को आकार देता है।

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

Comments

कस्टम CSS के बजाय बूटस्ट्रैप के साथ हल किया गया। धन्यवाद।

— मैटग्रीन

Answer 6

मैंने इसका इस्तेमाल किया और मेरे लिए काम करता है।

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

Answer 7

यदि आप में से कोई भी बूटस्ट्रैप -4 की तलाश कर रहा है । यह रहा

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

Comments

यह आदर्श समाधान नहीं है यदि आपके पास पाठ के साथ एक और कॉलम है, क्योंकि यह सीमा के किनारे के खिलाफ भी कठिन होगा

— जेम्स बर्क

Answer 8

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

बस माता-पिता की चौड़ाई और ऊंचाई प्राप्त करें JQuery.offsetHeight()और JQuery.offsetWidth(), और उन्हें बच्चे के तत्व के साथ सेट करें JQuery.width()औरJQuery.height() ।

यदि आप इसे उत्तरदायी बनाना चाहते हैं, तो उपरोक्त चरणों को भी दोहराएं $(window).resize(func)।