ফ্লেক্স-প্রবাহ সহ একটি ফ্লেক্স ধারক মধ্যে ক্রমবর্ধমান সংকোচন পছন্দ: সারি মোড়ানো

9

নিম্নলিখিত চশমা সহ বিভিন্ন আকারের চিত্র এবং অনুপাতের একটি চিত্র গ্যালারী প্রদর্শন করা হচ্ছে:

  1. চিত্রগুলির মধ্যে কোনও ফাঁকা (মার্জিন) নেই।
  2. যতটা সম্ভব মূল অনুপাতকে সম্মান করা।
  3. একটি লিঙ্ক দ্বারা বেষ্টিত চিত্র।
  4. নন-জেএস সমাধান।
  5. চিত্রগুলি কিছুটা কাটা যায়।
  6. পোর্টেবল সমাধান।
  7. প্রদর্শিত চিত্রের সেট এলোমেলো।
  8. চিত্রগুলি বাম থেকে ডানে প্রদর্শিত হবে (কলামগুলি ব্যবহার করে বাধা দেয়)।

আমি নিম্নলিখিত ফ্লেক্সবক্স সমাধান দিয়ে তা অর্জন করেছি:

কোড স্নিপেট দেখান

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

এর পরিবর্তে এর অর্থ: বর্তমান সমাধান

আমি আইটেমগুলির একটি উচ্চ ঘনত্ব পছন্দ করব যাতে চিত্রগুলি কখনই বড় হয় না: প্রত্যাশিত বিন্যাসের উদাহরণ

আমি সারিবদ্ধভাবে উপাদানগুলির সংখ্যা বিশ্বব্যাপী বৃদ্ধির জন্য সমাধানগুলি সন্ধান করেছি যাতে চিত্রগুলি বড় না হয় (বা কমপক্ষে খুব বেশি নয়: উদাহরণস্বরূপ: 10% সর্বোচ্চ)।

আমি এখন পর্যন্ত দুটি হ্যাকিশ সমাধান খুঁজে পেয়েছি:

সমাধান ঘ

জুম সম্পত্তি ব্যবহার :

কোড স্নিপেট দেখান

তবে সেই সম্পত্তি ফায়ারফক্সে নয়, ক্রোমে দুর্দান্ত কাজ করে।

সমাধান 2

প্রস্থ / উচ্চতা এবং রূপান্তর সহ জুম সম্পত্তি অনুকরণ : স্কেল :

কোড স্নিপেট দেখান

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

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

css  flexbox  image-gallery 
— প্যাট্রিক অ্যালার্ট
সূত্র

উত্তর:

1

আমি আপনার প্রারম্ভিক প্রচেষ্টা পরিবর্তন।

মূল ধারণা পরিবর্তন হয় img width: 100%;করতে width: auto;এবং লিঙ্ক উল্লেখ ' height। এটি আমাদের শূন্যস্থান সহ চিত্র দেবে।

ফাঁকগুলি সরাতে আমরা লিঙ্কগুলিতে display: flex;এবং যোগ করতে পারি flex-direction: column;। প্রায় শেষ.

সর্বশেষ পদক্ষেপটি লিঙ্কগুলিতে যুক্ত করা max-width: 100%;, এটি চিত্র widthযদি ছোট পর্দার কলামের চেয়েও প্রশস্ত হয় তবে এটি ওভারফ্লো থেকে রক্ষা করবে। এই জাতীয় সমস্যাটি আমরা চতুর্থ চিত্র সহ তেমানি আফিফের প্রথম সমাধানটিতে দেখতে পেতাম, যদি আমরা heightলিঙ্কগুলি আরও উচ্চতর রাখি । সম্পাদিত

স্নিপেট দেখুন।

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  display: flex;
  flex-direction: column;
  height: 166px;
  max-width: 100%;
}

section img {
  height: 100%;
  width: auto;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Controlling flex growability</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>

  </style>
</head>

<body>
  <section>
    <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  </section>
</body>

</html>
স্নিপেট প্রসারিত করুন

— আলেকসান্দ্র বেলুগিন
সূত্র
এটি এখন পর্যন্ত সেরা উত্তর। এটি ব্যবহারের চেয়ে একই ফল দেয় না zoomকারণ এটি করে সমস্ত সারিকে ঠিক একই উচ্চতা নির্ধারণ করে দেয়: এটি প্রাকৃতিক ফ্লেক্স অ্যালগরিদমকে "কোনও কিছুতে" অভিযোজিত "হিসাবে যতটা সম্ভব অনুকূল" প্রতিরোধ করে। আমি যতদূর বুঝতে পেরেছি, সামঞ্জস্যপূর্ণ এবং নন হ্যাকি উপায়ে আমি যা চাই তা অর্জন করা এখনও সম্ভব নয়।
— প্যাট্রিক আলার্ট
0

এখানে একটি ধারণা দেওয়া হয়েছে যেখানে আপনি সারিগুলির আকার নিয়ন্ত্রণ করতে উচ্চতা বিবেচনা min-width:100%করতে পারেন এবং স্থানটি পূরণ করার জন্য প্রধান কৌশলটি হল আপনার চিত্রগুলির উপর নির্ভর করা।

মূলত, aউচ্চতাটি সংজ্ঞা দেবে, চিত্রটি সেই উচ্চতাটি অনুসরণ করবে autoএবং অনুপাত বজায় রাখতে একটি প্রস্থকে গণনা করবে । চিত্রটির প্রস্থ লিঙ্কটির প্রস্থ নির্ধারণ করবে এবং তারপরে লিঙ্কটি স্থান পূরণ করতে বাড়বে (এর অভ্যন্তরে স্থান তৈরি করবে)। অবশেষে, min-width:100%আপনি লিঙ্কটির ভিতরে তৈরি স্থানটি চিত্রটি পূরণ করবেন fill

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 100px;
}

section img {
  height: 100%;
  width: auto; /* we need auto to keep the ratio based on the height */
  min-width: 100%; /* we expand the image to fill the gaps */
  max-width:100%;
  object-fit: cover;
}
<section>
  <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
স্নিপেট প্রসারিত করুন

আপনি যদি vwউচ্চতার জন্য ইউনিট বিবেচনা করেন তবে আপনার কাছে একটি স্থিতিশীল গ্রিড থাকবে যা একই ওভারাল কাঠামোটি বজায় রেখে স্কেল করবে:

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 8vw;
}

section img {
  height: 100%;
  width: auto;
  min-width: 100%;  
  max-width:100%;
  object-fit: cover;
}
<section>
  <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
স্নিপেট প্রসারিত করুন

— তেমনি আফিফ
সূত্র
-2

এটি সমাধান করার এক উপায় হ'ল যুক্ত line-height: 0করে aএবং heightমান দিয়ে pxমান নির্ধারণ করা।

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
section a {
  flex: auto;
  line-height: 0;
}
section img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Controlling flex growability</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>

    </style>
</head>
<body>
    <section>
        <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
    </section>
</body>
</html>
স্নিপেট প্রসারিত করুন

— মতান সানবিরা
সূত্র
এটি প্রতিটি সারিগুলির উচ্চতা পরিবর্তন করে, এটি জুম প্রভাব বা সমতুল্য হ্যাকের মতো সারি প্রতি বেশি আইটেমের অনুমতি দেয় না।
— প্যাট্রিক আলার্ট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.