ชอบการหดตัวมากกว่าการปลูกในภาชนะบรรจุแบบยืดหยุ่นด้วยการไหลแบบเฟล็กซ์: การพันแถว

9

การแสดงแกลเลอรี่ภาพที่มีขนาดและสัดส่วนต่างกัน

  1. ไม่มีช่องว่าง (ระยะห่าง) ระหว่างรูปภาพ
  2. เคารพอัตราส่วนเดิมให้มากที่สุด
  3. รูปภาพล้อมรอบด้วยลิงค์
  4. โซลูชันที่ไม่ใช่ JS
  5. รูปภาพอาจถูกครอบตัดเล็กน้อย
  6. โซลูชันแบบพกพา
  7. ชุดของภาพที่แสดงเป็นแบบสุ่ม
  8. รูปภาพจะต้องแสดงจากซ้ายไปขวา (ป้องกันการใช้คอลัมน์)

ฉันประสบความสำเร็จด้วยโซลูชัน flexbox ต่อไปนี้:

แสดงตัวอย่างโค้ด

วิธีแก้ปัญหาใช้งานได้ แต่ขึ้นอยู่กับขนาดของหน้าต่างรูปภาพบางภาพมีขนาดใหญ่เกินไปฉันต้องการองค์ประกอบมากขึ้นต่อแถวแม้ว่ารายการจะต้องมีการหดตัวมากขึ้น

ซึ่งหมายความว่าแทน: ทางออกปัจจุบัน

ฉันต้องการรายการที่มีความหนาแน่นสูงกว่าเพื่อที่ภาพจะไม่ขยายใหญ่ขึ้น ตัวอย่างโครงร่างที่คาดไว้

ฉันค้นหาวิธีแก้ไขเพื่อเพิ่มจำนวนองค์ประกอบต่อแถวทั่วโลกเพื่อให้ภาพไม่ได้รับการขยาย (หรืออย่างน้อยก็ไม่มากเกินไป: เช่น: 10% สูงสุด)

โซลูชันแฮ็กสองตัวที่ฉันได้พบคือ:

โซลูชันที่ 1

การใช้คุณสมบัติซูม :

แสดงตัวอย่างโค้ด

แต่คุณสมบัตินั้นใช้งานได้ดีใน Chrome ไม่ใช่ใน Firefox

โซลูชันที่ 2

การจำลองคุณสมบัติการซูมด้วยความกว้าง / ความสูงและการแปลง: สเกล :

แสดงตัวอย่างโค้ด

วิธีการแก้ปัญหานั้นใช้งานได้ไกล แต่ต้องการแฮ็กเพียงเล็กน้อยและอยู่ไกลจากความสง่างามและตอนนี้จะมีผลกระทบกับองค์ประกอบอื่น ๆ ของหน้าเว็บ

มีวิธีแก้ปัญหาอื่น ๆ ที่มุ่งเน้นความยืดหยุ่นมากกว่าที่อนุญาตการควบคุมแบบนั้นหรือไม่? ฉันได้ลองใช้flex-grow: 0 : แน่นอนปิดการใช้งานรายการที่กำลังเติบโต แต่แล้วมีช่องว่างรอบภาพทุกที่

css  flexbox  image-gallery 
— Patrick Allaert
แหล่งที่มา

คำตอบ:

1

ฉันแก้ไขความพยายามเริ่มต้นของคุณ

แนวความคิดหลักคือการเปลี่ยนimg width: 100%;ไปwidth: auto;และระบุการเชื่อมโยง heightนี่จะทำให้รูปภาพของเรามีช่องว่าง

ในการลบช่องว่างที่เราสามารถเพิ่มการเชื่อมโยงและdisplay: flex; flex-direction: column;เกือบเสร็จแล้ว.

ขั้นตอนสุดท้ายคือการเพิ่มลิงค์max-width: 100%;มันจะป้องกันจาก ovelflow ถ้าภาพwidthจะกว้างกว่าคอลัมน์ในหน้าจอขนาดเล็ก ปัญหาดังกล่าวเราสามารถเห็นได้ในวิธีแก้ปัญหาแรกของ Temani Afif ที่มีรูปภาพที่ 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>
ขยายตัวอย่างข้อมูล

— Aleksandr Belugin
แหล่งที่มา
นี่คือคำตอบที่ดีที่สุด มันไม่ได้ให้ผลลัพธ์ที่เหมือนกันมากกว่าการใช้zoomเพราะมันจะแก้ไขแถวทั้งหมดให้มีความสูงเท่ากันโดยการทำเช่นนี้: มันจะป้องกันอัลกอริทึมแบบยืดหยุ่นตามธรรมชาติเพื่อ "ปรับ" ให้เข้ากับบางสิ่ง "ที่สุดเท่าที่จะทำได้" เท่าที่ฉันเข้าใจยังไม่สามารถบรรลุสิ่งที่ฉันต้องการในวิธีที่เข้ากันได้และไม่แฮ็ค
— Patrick Allaert
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>
ขยายตัวอย่างข้อมูล

— Temani Afif
แหล่งที่มา
-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>
ขยายตัวอย่างข้อมูล

— Matan Sanbira
แหล่งที่มา
สิ่งนี้เปลี่ยนความสูงของทุกแถวโดยจะไม่อนุญาตให้มีรายการมากขึ้นต่อแถวเช่นเดียวกับเอฟเฟกต์การซูมหรือแฮ็คที่เทียบเท่า
— Patrick Allaert
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.