দ্বিতীয় চিত্রটিতে দেখে মনে হচ্ছে আপনি ছবিটি বাক্সটি পূরণ করতে চান তবে আপনি যে উদাহরণটি তৈরি করেছেন সে দিকটি অনুপাতকে রাখে (পোষা প্রাণী স্বাভাবিক, পাতলা বা চর্বিযুক্ত নয়) দেখায়।
উদাহরণস্বরূপ আপনি যদি এই চিত্রগুলি ফটোশপ করেন তবে দ্বিতীয়টি যেমন "এটি কেমন হওয়া উচিত" হয় (তবে আপনি আইএস বলেছেন, যখন প্রথম উদাহরণটি আপনি "উচিত" বলেছেন)
যাইহোক, আমি ধরে নিতে হবে:
যদি "চিত্রগুলি দিক রেশন রেখে পুনরায় আকার না দেওয়া হয়" এবং আপনি আমাকে এমন চিত্র দেখান যা পিক্সেলের অনুপাত রাখে তবে আমি ধরে নিতেই হবে আপনি "ক্রপিং" ক্ষেত্রের অনুপাতটি পূরণ করার চেষ্টা করছেন (এর অভ্যন্তরের অভ্যন্তর) সবুজ) পিক্সেলের দিক অনুপাত রেখে WILE ILE অর্থাৎ আপনি চিত্রটি বড় করে এবং ক্রপ করে চিত্রটি দিয়ে ঘরটি পূরণ করতে চান।
যদি এটি আপনার সমস্যা হয় তবে আপনি যে কোডটি দিয়েছেন তা "আপনার সমস্যা" প্রতিফলিত করে না, তবে এটি আপনার সূচনা উদাহরণ।
পূর্ববর্তী দুটি অনুমানের ভিত্তিতে, বাক্সের উচ্চতা গতিশীল থাকলে, তবে ব্যাকগ্রাউন্ডের চিত্রগুলির সাথে আপনার যা প্রয়োজন তা প্রকৃত চিত্রগুলি দিয়ে সম্পন্ন করা যাবে না। হয় "ব্যাকগ্রাউন্ড-সাইজ: কনটেন্ট" বা এই কৌশলগুলি ব্যবহার করে (পার্সেন্টগুলিতে স্মার্ট প্যাডিংগুলি যা আপনি চান যেখানেই ফসল বা সর্বোচ্চ আকারকে সীমাবদ্ধ করে):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
চিত্রগুলির মাধ্যমে এটি সম্ভব হওয়ার একমাত্র উপায় হ'ল যদি আমরা আপনার দ্বিতীয় আইমেজ সম্পর্কে ভুলে যাই এবং কোষগুলির একটি নির্দিষ্ট উচ্চতা থাকে এবং অবশ্যই আপনার নমুনা চিত্রগুলি বিচার করে উচ্চতা একই থাকে!
সুতরাং যদি আপনার ধারকের উচ্চতা পরিবর্তন না হয় এবং আপনি আপনার চিত্রগুলি বর্গক্ষেত্র রাখতে চান তবে আপনাকে কেবলমাত্র চিত্রটির সর্বাধিক উচ্চতাটি সেই মান হিসাবে (মাইনাস প্যাডিংস বা সীমানা) সেট করতে হবে যা বক্স-আকারের বৈশিষ্ট্যের উপর নির্ভর করে কোষ)
এটার মত:
<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/
আপনার কোডটি অবৈধ (প্রারম্ভিক ট্যাগগুলি বন্ধ করার পরিবর্তে রয়েছে, সুতরাং তারা নিখরচায় সেলগুলি আউটপুট দেয়, ভাইবোন নয়, তিনি ত্রুটিযুক্ত কোডের অভ্যন্তরে আপনার চিত্রগুলির একটি স্ক্রিনশট ব্যবহার করেছেন, এবং ফ্লেক্স বাক্সটি কলামগুলিতে ধারণ করছে না তবে উভয় উদাহরণই একটি কলামে রয়েছে ( আপনি "সারি" সেটআপ করেছেন তবে অন্যের অভ্যন্তরে একটি কক্ষের বাসা বেঁধে রাখা দুর্নীতিগ্রস্ত কোডের ফলে একটি ফ্লেক্সের অভ্যন্তরে একটি ফ্লেক্স তৈরি হয়ে শেষ পর্যন্ত COLUMNS হিসাবে কাজ করে you আপনি কী অর্জন করতে চেয়েছিলেন এবং কীভাবে আপনি এই কোডটি নিয়ে এসেছিলেন তা আমার কোনও ধারণা নেই তবে আমি ' আমি অনুমান করছি আপনি কি চান এটি এই।
আমি প্রদর্শন যোগ করেছি: সেলগুলিতেও নমনীয়, তাই চিত্রটি কেন্দ্রীভূত হয় (আমার মনে হয় display: tableএই সমস্ত মার্কআপের সাথে এখানেও ব্যবহার করা যেতে পারে)
