फ्लेक्स-फ्लो के साथ एक फ्लेक्स कंटेनर में बढ़ते हुए सिकुड़न को प्राथमिकता दें: पंक्ति लपेटें

9

निम्नलिखित चश्मे के साथ विभिन्न आकार की छवियों और अनुपात की एक छवि गैलरी प्रदर्शित करना:

  1. छवियों के बीच कोई रिक्त स्थान (मार्जिन) नहीं।
  2. मूल अनुपात का यथासंभव सम्मान करना।
  3. एक लिंक से घिरा हुआ चित्र।
  4. गैर-जेएस समाधान।
  5. छवियों को थोड़ा क्रॉप किया जा सकता है।
  6. पोर्टेबल समाधान।
  7. प्रदर्शित छवियों का सेट यादृच्छिक है।
  8. छवियों को बाएं से दाएं (स्तंभों का उपयोग करने से रोकता है) प्रदर्शित किया जाना चाहिए।

मैंने निम्नलिखित फ्लेक्सबॉक्स समाधान के साथ यह हासिल किया:

कोड स्निपेट दिखाएं

समाधान काम करता है, लेकिन खिड़की के आकार के आधार पर, कुछ चित्र बहुत अधिक बढ़े हुए हैं, मैं प्रति पंक्ति अधिक तत्वों को प्राथमिकता दूंगा, भले ही आइटम को अधिक सिकुड़ने की आवश्यकता हो।

इसका मतलब है कि इसके बजाय: वर्तमान समाधान

मैं वस्तुओं के उच्च घनत्व को प्राथमिकता दूंगा ताकि चित्र कभी बढ़े हुए न हों: अपेक्षित लेआउट का उदाहरण

मैंने विश्व स्तर पर प्रति पंक्ति तत्वों की संख्या बढ़ाने के लिए समाधानों की तलाश की ताकि चित्र बढ़े नहीं (या कम से कम बहुत अधिक नहीं: उदाहरण के लिए: 10% अधिकतम)।

अब तक मैंने जो दो हैकिश समाधान खोजे हैं:

समाधान 1

ज़ूम संपत्ति का उपयोग करना :

कोड स्निपेट दिखाएं

लेकिन वह प्रॉपर्टी क्रोम में शानदार काम करती है, फ़ायरफ़ॉक्स में नहीं।

समाधान २

चौड़ाई / ऊँचाई और परिवर्तन के साथ ज़ूम गुण का अनुकरण करना : पैमाना :

कोड स्निपेट दिखाएं

उस समाधान ने अब तक काम किया है, लेकिन कुछ हैक की आवश्यकता है, और सुरुचिपूर्ण होने से बहुत दूर है और अब पृष्ठ के अन्य तत्वों के साथ प्रभाव होगा।

क्या कोई अन्य समाधान, अधिक फ्लेक्सग्रिड-उन्मुख है जो उस तरह के नियंत्रण की अनुमति देता है? मैंने फ्लेक्स-ग्रो का उपयोग करने की कोशिश की है: 0 : यह, वास्तव में, बढ़ती वस्तुओं को अक्षम करता है, लेकिन फिर हर जगह छवियों के आसपास खाली होते हैं।

css  flexbox  image-gallery 
— पैट्रिक इलाहाबाद
स्रोत

जवाबों:

1

मैं आपके शुरुआती प्रयास को संशोधित करता हूं।

मुख्य विचार बदलने के लिए है img width: 100%;करने के लिए width: auto;और लिंक का उल्लेख ' height। यह हमें अंतराल के साथ चित्र देगा।

अंतराल को हटाने के लिए हम लिंक को जोड़ सकते हैं display: flex;और flex-direction: column;। लगभग हो गया।

अंतिम चरण लिंक को जोड़ना है max-width: 100%;, यह ओवेलफ्लो से बचाएगा अगर छवि widthछोटे स्क्रीन में कॉलम से अधिक व्यापक होगी। इस तरह की समस्या को हम तैमनी आफिफ़ के पहले समाधान में देख सकते हैं, 4 डी इमेज के साथ, यदि हम 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%आप छवि को लिंक के अंदर बनाए गए स्थान को भर देंगे।

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और निर्धारित करना है ।heightpx

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>
स्निपेट का विस्तार करें

— मतान संबीरा
स्रोत
यह हर पंक्तियों की ऊँचाई को बदल देता है, यह प्रति पंक्ति अधिक वस्तुओं को ज़ूम इफ़ेक्ट या समकक्ष हैक की अनुमति नहीं देता है।
— पैट्रिक अल्लार्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.