114

সিএসএস ফ্লেক্স বক্স মডেল ব্যবহার করে, আমি কীভাবে কোনও চিত্রকে তার অনুপাতের অনুপাত বজায় রাখতে বাধ্য করতে পারি?

জেএস ফিডল: http://jsfiddle.net/xLc2Le0k/2/

লক্ষ্য করুন যে চিত্রগুলি পাত্রে প্রস্থটি পূরণ করার জন্য প্রসারিত বা সঙ্কুচিত হবে। এটি ঠিক আছে, তবে আমরা কি চিত্রের অনুপাত বজায় রাখতে উচ্চতা প্রসারিত বা সঙ্কুচিত করতে পারি ?

এইচটিএমএল

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

সিএসএস

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

html css flexbox

— coderMe
সূত্র

1

যতদূর আমি জানি, সেরা সমাধান হ'ল <div>সিএসএস সহ একটি ব্যবহার করাbackground-image: url(...);background-size:contain; background-repeat:no-repeat

— ব্লেজমোনজার

1

এখানে কিছু আকর্ষণীয় শীর্ষস্থান রয়েছে, তবে যখন চিত্রগুলি ইতিমধ্যে একই অনুপাত না হয় তখন কী হবে? যোগ করা এবং 'অতিরিক্ত' ডিভ, আমাদের চিন্তিত হওয়া শেষ জিনিস। মত এই পরিবর্তে একটি পরীক্ষা ক্ষেত্রে ব্যবহার কেন নয়: jsfiddle.net/sheriffderek/999Lg9qv

— sheriffderek

68

আইএমজি ট্যাগগুলির জন্য যদি আপনি একপাশটি সংজ্ঞায়িত করেন তবে দিকের অনুপাত রাখতে অন্য পক্ষের আকার পরিবর্তন করা হয় এবং ডিফল্ট চিত্রগুলি তাদের মূল আকারে প্রসারিত করে।

এই সত্যটি ব্যবহার করে যদি আপনি প্রতিটি ইমগ ট্যাগটি ডিভ ট্যাগে আবদ্ধ করেন এবং এর প্রস্থটি প্যারেন্ট ডিভের 100% এ সেট করেন তবে উচ্চতাটি যেমনটি চেয়েছিলেন তেমন অনুপাত অনুসারে হবে।

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

— মুহাম্মদ উমর রা
সূত্র

2

আমি জানি যে দুটি উত্তর রয়েছে যা ডিভগুলি ব্যবহার করার পরামর্শ দেয় তবে আমি এই উত্তরটি সঠিক হিসাবে চিহ্নিত করছি কারণ এটি ব্যাখ্যা করে যে কেন চিত্রের উচ্চতা আমার প্রত্যাশার চেয়ে আলাদা। প্রকৃতপক্ষে, এটি স্বাভাবিক এবং সঠিক আচরণ এবং এটি কোনও ত্রুটিযুক্ত না হওয়ায় "স্থির" হওয়ার সম্ভাবনা কম।

— কোডারমে

18

তবে এই উত্তরটি ফ্লেক্সবক্স সম্পর্কে কিছু বলতে পারে না, কারণ চিত্রগুলি ফ্লেক্সবক্স ধারকগুলির মধ্যে আলাদা আচরণ করে। একপাশে সেট করা আনুপাতিকভাবে অন্যটির আকার পরিবর্তন করবে না। এগুলিকে নন ফ্লেক্সবক্স ধারক মধ্যে মোড়ানো সাহায্য করে কিন্তু এটি অপ্রয়োজনীয় মার্কআপ হারা শব্দকোষ যুক্ত করে।

— রবার্ট কোরিটনিক

3

দেখে মনে হচ্ছে না এই কাজটি করার জন্য আপনার একটি মোড়কের ডিভ দরকার

— রিক

4

কিন্তু, এই কি? jsfiddle.net/xLc2Le0k/15 আমি মনে করি যে এই সমাধানটি একটি ফ্লুক যা কেবল কাজ করে কারণ চিত্রগুলি সমস্ত একই অনুপাত। পার্শ্ব দ্রষ্টব্য: অবস্থানের জন্য / বিশেষত প্রতিক্রিয়াশীল চিত্রগুলির সাথে লেনদেন করার জন্য কোনও ডিভিতে একটি চিত্র রেখে কোনও 'অর্থবোধ' হারিয়ে যায় না।

— শেরিফডেরেক

1

সিরিয়াসলি সবচেয়ে পরিষ্কার সমাধান এবং এটি ছবিতে কাজ করে!

— শনিওবাইক

64

ফ্লেক্স প্যারেন্টের মধ্যে অক্ষের মধ্যে ইমেজগুলি প্রসারিত থেকে বাঁচতে আমি বেশ কয়েকটি সমাধান পেয়েছি।

আপনি চিত্রটিতে অবজেক্ট-ফিট ব্যবহার করার চেষ্টা করতে পারেন যা, যেমন

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

অথবা আপনি ফ্লেক্স-স্পেসফিক নিয়ম যুক্ত করতে পারেন যা কিছু ক্ষেত্রে আরও ভাল কাজ করতে পারে।

align-self: center;
flex: 0 0 auto;

— ম্যাটি বালাম
সূত্র

4

আইই এবং এজতে সমর্থন 14 এজে পর্যন্ত না হারিয়ে যদি অবজেক্ট-ফিট একটি ভাল সমাধান হতে পারে

— ড্যানিয়েলস

1

একটি এজ এর এজ এর জন্য এই অবজেক্ট-ফিট ফলব্যাকটি দেখুন ।

— Andrei Telteu

আমি নিজেই সেই ফ্যালব্যাকটি ব্যবহার করছি, খুব ভাল কাজ করে।

— ম্যাটি বালাম

1

@ ড্যানিয়েলস এজের এখন বিকাশে অবজেক্ট-ফিট রয়েছে: বিকাশকারী.মাইক্রোসফট.ইনস

— মাইক্রোসফট

1

object-fit: contain;আমার জন্য কৌতুকটি করেছিল, যখন আমার কেবল ক্রোমের সমস্যা ছিল, এফএফ ভাল ছিল।

— বেনিয়ামিন পিটার

53

একটি সমন্বিত ডিভ যোগ করার দরকার নেই।

সিএসএস "সারিবদ্ধ আইটেম" বৈশিষ্ট্যের জন্য ডিফল্ট হ'ল "প্রসারিত" যা আপনার চিত্রগুলি সম্পূর্ণ আসল উচ্চতায় প্রসারিত করতে বাধ্য করছে। CSS "প্রান্তিককরণ-আইটেম" বৈশিষ্ট্যটিকে "ফ্লেক্স-স্টার্ট" এ সেট করা আপনার সমস্যার সমাধান করে।

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

— মারভিন হার্বল্ড
সূত্র

3

আহ্ ... সমর্থিত উপায়ে কিছু করার জন্য ধন্যবাদ। আমি সেগুলি পর্যন্ত উত্তরগুলি পড়ছিলাম এবং বিশ্বাস করতে পারি না যে আমরা সমস্ত নোংরা হ্যাক ছিলাম ..

— ফলিক্স গাগনন-গ্রেনিয়ার

35

অভ্যন্তরীণ মাত্রা সহ বেশিরভাগ চিত্র , এটি একটি jpegচিত্রের মতো প্রাকৃতিক আকার । যদি নির্দিষ্ট আকারটি প্রস্থ এবং উচ্চতা উভয়ের মধ্যে একটির সংজ্ঞা দেয়, অনুপস্থিত মানটি অভ্যন্তরীণ অনুপাত ব্যবহার করে নির্ধারিত হয় ... - দেখুন MDN ।

তবে এটি যতটা আশা করি বর্তমান ফ্লেক্সিবল বক্স লেআউট মডিউল স্তর 1 সহ সরাসরি ফ্লেক্স আইটেম হিসাবে সেট করা চিত্রগুলি যদি প্রত্যাশিতভাবে কাজ করে না ।

এই আলোচনাগুলি দেখুন এবং বাগ রিপোর্টগুলি সম্পর্কিত হতে পারে:

ফ্লেক্সবাগস # 14 - ক্রোম / ফ্লেক্সবক্স অন্তর্নিহিত আকার পরিবর্তন সঠিকভাবে কার্যকর করা হয়নি।
ফায়ারফক্স বাগ 972595 - ফ্লেক্স পাত্রে ফ্লেক্স আইটেমগুলির অভ্যন্তরীণ প্রস্থের কম্পিউটিংয়ের জন্য "প্রস্থের" পরিবর্তে "ফ্লেক্স-বেস" ব্যবহার করা উচিত
ক্রোমিয়াম ইস্যু 249112 - ফ্লেক্সবক্সে, অভ্যন্তরীণ দিক অনুপাতকে প্রধান-আকারের গণনাটি জানানোর অনুমতি দিন।

কর্মপরিকল্পনা হিসাবে, আপনি প্রতিটিকে <img>একটি <div>বা একটি বা আরও কিছু দিয়ে মোড়ানো করতে <span>পারেন।

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

স্নিপেট প্রসারিত করুন

4.5 ফ্লেক্স আইটেমগুলির নূন্যতম আকার

ফ্লেক্স আইটেমগুলির জন্য আরও যুক্তিসঙ্গত ডিফল্ট ন্যূনতম আকার সরবরাহ করতে , এই স্পেসিফিকেশনটি সিএসএস ২.১ এ সংজ্ঞায়িত ন্যূনতম প্রস্থ এবং নূন্যতম -উচ্চতার বৈশিষ্ট্যের প্রাথমিক মান হিসাবে একটি নতুন অটো মান প্রবর্তন করে।

বিকল্পভাবে, আপনি tableপরিবর্তে সিএসএস লেআউট ব্যবহার করতে পারেন , যা আপনি একই ফলাফল পাবেন flexbox, এটি আরও ব্রাউজারগুলিতে এমনকি আই 8 এর জন্যও কাজ করবে।

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

স্নিপেট প্রসারিত করুন

— স্টিকারসমূহ
সূত্র

.slider > div{min-width:0}সমর্থিত নতুন ব্রাউজারগুলিতে প্রথম স্নিপেটের প্রয়োজন min-width: auto।

— ওরিওল

3

ফ্লেক্সবক্স স্পেক একটি নতুন autoমানকে ডিফল্ট মান হিসাবে min-widthএবং min-height(আগে এটি ছিল 0) প্রবর্তন করেছিল । ক্রোম এটি এখনও কার্যকর করে না, তাই আপনার প্রথম স্নিপেট কাজ করে। চিত্রগুলির ডিফল্ট প্রস্থের চেয়ে কম ফ্লেক্স আইটেমগুলি সঙ্কুচিত করার জন্য নতুন ব্রাউজারগুলির এটির প্রয়োজন।

— ওরিওল

2

+1 এর উত্তর গ্রহণ করা উচিত কারণ এটি ফ্লেক্সবক্স মডেলগুলির চিত্রগুলির বিষয়ে কথা বলে যা এই ক্ষেত্রে মূল সমস্যা ...

— রবার্ট কোরিতনিক

আপনার লেআউটটি বিভিন্ন ব্রেক-পয়েন্টে পরিবর্তন না ঘটলে সারণী দুর্দান্ত but

— শেরিফডেরেক

1

চিত্রগুলি যখন একই অনুপাত নয় তখন কী হবে? jsfiddle.net/sheriffderek/5u7y21we

— sheriffderek

6

আমি ইদানীং ফ্লেক্সবক্সের চারপাশে খেলছি এবং পরীক্ষার জন্য এবং নিম্নলিখিত যুক্তির মাধ্যমে আমি এর সমাধান করেছি। তবে বাস্তবে আমি নিশ্চিত নই যে এটি ঠিক কী ঘটে what

যদি প্রকৃত প্রস্থটি ফ্লেক্স সিস্টেম দ্বারা প্রভাবিত হয়। সুতরাং প্যারেন্টের সর্বোচ্চ প্রস্থের প্রস্থের হিট করার পরে তারা CSS এ অতিরিক্ত প্রস্থ সেট উপেক্ষা করে। তারপরে এটি প্রস্থটি 100% এ সেট করা নিরাপদ।

যেহেতু img ট্যাগের উচ্চতা চিত্র থেকেই তৈরি হয় তবে উচ্চতা 0% এ সেট করা কিছু করতে পারে। (এটি এখানে আমি কী সম্পর্কে অস্পষ্ট ... তবে এটি আমার কাছে বোঝা গেল যে এটি ঠিক করা উচিত)

ডেমো

(মনে রাখবেন এখানে এটি আগে দেখেছে!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

শুধুমাত্র ক্রোমে এখনও কাজ করে

— মুহাম্মদ উমর রা
সূত্র

আকর্ষণীয়, তবে এটি একটি বাগ বলে মনে হচ্ছে। মতে বৈশিষ্ট , " শতকরা হার উত্পন্ন বক্স এর ধারণকারী ব্লক উচ্চতা থেকে সম্মান সঙ্গে গণনা করা হয়। ধারণকারী ব্লক উচ্চতা স্পষ্টভাবে উল্লেখ না করা হলে (যেমন, তাহলে বিষয়বস্তুর উচ্চতা উপর নির্ভর করে), এবং এই উপাদান একেবারে স্থান নয় , মানটি গণনা করেauto "। ফায়ারফক্সে এটাই ঘটে।

— ওরিওল

jsfiddle.net/xLc2Le0k/8 এফএফ এবং ক্রোমের পার্থক্য ব্যাখ্যা করে। এর জন্য

— মুহাম্মদ উমার

প্রস্থটি ff এ করছিল বলে মনে হচ্ছে ক্রোমে উচ্চতা কী করছে।

— মুহাম্মদ উমার

এটি আকর্ষণীয়, তবে আমি আশঙ্কা করি যে এক্স-ব্রাউজার-কেবলমাত্র সমাধানগুলি আসলে সমাধান নয়। আপনার মন্তব্য ফিজল , এখানে: jsfiddle.net/xLc2Le0k/8 এফএফ, যদিও একেবারে আকর্ষণীয় । এটি দেখায় বলে মনে হচ্ছে যে এফএফ চিত্রটির উচ্চতাটিকে "উচ্চতর" আনুপাতিক করে তুলছে যদি এটি সত্যই 100% হত। অন্য কথায়, img ধারকটির প্রদর্শন সম্পর্কে "জানেন না": ফ্লেক্স। এটি ব্যাখ্যা করে কেন, এফএফ-তে আপনি যদি ইমগের প্রস্থটি 100% এ সেট করেন তবে আপনি যদি প্রস্থটিকে স্বয়ংক্রিয়ভাবে সেট করেন তবে চিত্রটি লম্বা হয়।

— কোডারমে

এই ধরণ পাসে ... কিন্তু শুধুমাত্র Chrome এ কাজ করে: jsfiddle.net/sheriffderek/xLc2Le0k/270

— sheriffderek

2

এই আচরণ আশা করা হয়। ফ্লেক্স ধারক তার সমস্ত শিশুদের ডিফল্টরূপে প্রসারিত করে। চিত্রটির কোনও ব্যতিক্রম নেই। (যেমন, পিতামাতার align-items: stretchসম্পত্তি থাকবে)

দিক অনুপাত রাখতে আমাদের দুটি সমাধান রয়েছে:

হয় অন্যথায় ডিফল্ট align-items: stretchসম্পত্তি প্রতিস্থাপন করুন align-items: flex-startবা align-self: center, http://jsfiddle.net/e394Lqnt/3/

অথবা

সম্পত্তিকে একচেটিয়াভাবে সন্তানের জন্য একত্রে সেট করুন: পছন্দ করুন align-self: centerবা align-self: flex-startইত্যাদি j

— অসীম কে.টি.
সূত্র

-1

প্রকৃতপক্ষে আমি জানতে পেরেছিলাম যে চিত্রের অনুপাত ধরে রাখতে ইমেজ ট্যাগের ধারকটির উচ্চতা থাকা দরকার। উদাহরণস্বরূপ>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

তারপরে আপনার এইচটিএমএলতে আপনার ধারক ট্যাগ চিত্রটি মোড়াবেন

<div class="container"><img src="image.jpg" alt="image" /></div>

আইই এবং অন্যান্য ব্রাউজারগুলির জন্য এই কাজ

— kengreg
সূত্র

-1

আমি ঠিক একই সমস্যা ছিল। আপনার উপাদানগুলি কেন্দ্র করতে ফ্লেক্স সারিবদ্ধ ব্যবহার করুন। align-items: centerপরিবর্তে আপনার ব্যবহার করা উচিত align-content: center। এটি অনুপাতের অনুপাত বজায় রাখবে, এবং প্রান্তিককরণ বিষয়বস্তু অনুপাত রাখবে না।

— ক্লিনটন সবুজ
সূত্র

উচ্চতা পরিবর্তন করার সময় চিত্রের অনুপাত বজায় রাখুন

ডেমো