दूसरी छवि में ऐसा लगता है कि आप बॉक्स को भरने के लिए छवि चाहते हैं, लेकिन आपने जो उदाहरण बनाया है वह पहलू अनुपात को बनाए रखता है (पालतू जानवर सामान्य दिखते हैं, न कि पतले या मोटे)।
मुझे कोई सुराग नहीं है यदि आपने उन छवियों को उदाहरण के रूप में फोटोशॉप किया है या दूसरा यह है कि "यह कैसा होना चाहिए" (आपने आईएस कहा है, जबकि पहला उदाहरण जो आपने कहा "चाहिए")
वैसे भी, मुझे यह मानना होगा:
यदि "छवियों को पहलू राशन रखने के लिए आकार परिवर्तन नहीं किया जाता है" और आप मुझे एक छवि दिखाते हैं जो पिक्सल के पहलू अनुपात को बनाए रखता है, तो मुझे लगता है कि आप "फसल" क्षेत्र के पहलू अनुपात को पूरा करने की कोशिश कर रहे हैं (भीतर का हरे) पिक्सल के पहलू अनुपात को ध्यान में रखते हुए। यानी आप इमेज को बड़ा और क्रॉप करके सेल को इमेज से भरना चाहते हैं।
यदि यह आपकी समस्या है, तो आपके द्वारा प्रदान किया गया कोड "आपकी समस्या" को नहीं दर्शाता है, लेकिन आपका प्रारंभिक उदाहरण है।
पिछली दो मान्यताओं को देखते हुए, आपको जो आवश्यक है वह वास्तविक छवियों के साथ पूरा नहीं किया जा सकता है यदि बॉक्स की ऊंचाई गतिशील है, लेकिन पृष्ठभूमि छवियों के साथ। या तो "बैकग्राउंड-साइज़: समाहित" या इन तकनीकों का उपयोग करके (percents में स्मार्ट पेडिंग जो आपके द्वारा इच्छित कहीं भी क्रॉपिंग या अधिकतम आकार को सीमित करते हैं):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
छवियों के साथ यह एकमात्र तरीका है यदि हम आपके दूसरे iimage के बारे में भूल जाते हैं, और कोशिकाओं की एक निश्चित ऊंचाई है, और FORTUNATELY, आपके नमूना चित्रों को देखते हुए, ऊँचाई समान रहती है!
इसलिए यदि आपके कंटेनर की ऊँचाई नहीं बदलती है, और आप अपनी छवियों को वर्गाकार रखना चाहते हैं, तो आपको बस उस बॉक्स के आकार की संपत्ति के आधार पर, उस ज्ञात मान (माइनस पैडिंग या बॉर्डर) पर छवियों की अधिकतम ऊँचाई निर्धारित करनी होगी। कोशिकाओं)
ऐशे ही:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
</div>
</div>
</div>
और सीएसएस:
.content {
background-color: green;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
border: solid 10px red;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
http://jsfiddle.net/z25heocL/
आपका कोड अमान्य है (खुलने वाले टैग बंद होने के बजाय हैं, इसलिए वे NESTED कोशिकाओं का उत्पादन करते हैं, भाई-बहनों का नहीं। उन्होंने दोषपूर्ण कोड के अंदर आपकी छवियों के SCREENSHOT का उपयोग किया है, और फ्लेक्स बॉक्स कक्षों को नहीं पकड़ रहा है, लेकिन दोनों उदाहरण एक कॉलम में हैं। आप "पंक्ति" सेटअप करते हैं, लेकिन एक कोड को दूसरे के अंदर रखने वाले भ्रष्ट कोड के परिणामस्वरूप एक फ्लेक्स के अंदर एक फ्लेक्स होता है, अंत में COLUMNS के रूप में काम करता है। मुझे नहीं पता कि आप क्या हासिल करना चाहते थे, और आप उस कोड के साथ कैसे आए, लेकिन मैं ' मी अनुमान लगा रहा है कि आप क्या चाहते हैं।
मैंने प्रदर्शन जोड़ा: कोशिकाओं को भी फ्लेक्स, इसलिए छवि केंद्रित हो जाती है (मुझे लगता है कि display: tableयहां यह सब मार्के के साथ भी इस्तेमाल किया जा सकता था)
