कंटेनर फिट करने के लिए छवि को स्केल कैसे करें?

Question

मेरे पास एक छवि सूची है, मैं चाहता हूं कि छवियां उनके कंटेनर में स्केल हों, जिनके आकार समान हैं। इस तरह:

मेरे द्वारा बनाए गए एक jsfiddle

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" > 
      </a> 
     </div> 
    </div> 
</div> 

मैं ऐसा कैसे कर सकता है? और मेरे उदाहरण में, मैंने ऊंचाई परिभाषित की: 100px ;, यदि मैं ब्राउज़र का आकार बदलता हूं, तो यह उत्तरदायी नहीं होता है, div की ऊंचाई अपरिवर्तित बनी हुई है। यदि संभव हो, तो मैं इस छवि सूची को उत्तरदायी चाहता हूं।

Answer 1

height और widthmax-height और max-width बदलें। छवि इसके माता-पिता से बड़ी नहीं होगी।

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

Updated Fiddle

Answer 2

यह मदद करनी चाहिए कम से कम अपने उदाहरण के लिए। ऐसे कुछ मामले हो सकते हैं जिनमें यह काम नहीं करेगा। उस स्थिति में आपको एक जेएस समाधान मिलना होगा।

.thumbnail img { 
    height: 100%; 
    width: auto; 
} 

Answer 3

.thumbnail { 
    height: 100px; 
    display: table; 
} 

.thumbnail img { 
    height: 100%; 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 4

.thumbnail img { 
height: 100%; 
    width: 100%; 
} 

इस का प्रयोग करें।

Answer 5

.thumbnail { 
     height: 100%; 
    } 

    .thumbnail img { 
     max-height: 100%; 
     max-width: 100%; 
     border: 1px solid red; 
    } 

Answer 6

(मैं एक जवाब है, हालांकि यह एक पुराने सवाल यह है कि जोड़ देंगे। मैं एक ही मुद्दा था जब तक मैं छवि लिंक करने के लिए वर्ग thumbnail जोड़ा गया है और एक छोटा सा गहरा देखा। कोई जोड़ा सीएसएस जरूरी हो गया था।)

शायद कुछ बदल गया है। बूटस्ट्रैप 3.3.7 में।

.thumbnail > img, 
.thumbnail a > img { 
    margin-left: auto; 
    margin-right: auto; 
} 

और यह (गैर न्यूनतम किया गया सीएसएस, लाइन 1124):

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

तो सब कुछ सही बॉक्स से बाहर अगर आप काम करना चाहिए इस (गैर minified सीएसएस, लाइन 5019) है छवि लिंक में thumbnail कक्षा जोड़ा है। (आप उन और चीजों की दोनों को हटाने की जरूरत टूट जाएगा।) और इसके साथ या जोड़ा सीएसएस के बिना काम करता है:

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

जोड़ा सीएसएस Bootstraps शैलियों को ओवरराइड करता है, कम से कम मेरे लिए के बाद से जोड़ा शैली के बाद शामिल किया गया है Bootstraps अपनी शैलियों। (लेकिन यह अनावश्यक है।)

Answer 7

2017 में आप फ्लेक्स का उपयोग कर सकते हैं। इसके अतिरिक्त आप छवियों थंबनेल कंटेनर में केंद्रित हो जाएगी: updated fiddle

.thumbnail { 
    height: 300px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    border: solid 1px blue; 
} 

.thumbnail img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: 0 auto; 
    border: solid 1px red; 
}