Thích thu nhỏ hơn phát triển trong một thùng chứa flex với dòng flex: quấn hàng

9

Hiển thị một bộ sưu tập hình ảnh của các hình ảnh và tỷ lệ kích thước khác nhau với các thông số kỹ thuật sau:

  1. Không có khoảng trống (lề) giữa các hình ảnh.
  2. Tôn trọng tỷ lệ ban đầu càng nhiều càng tốt.
  3. Hình ảnh được bao quanh bởi một liên kết.
  4. Giải pháp phi JS.
  5. Hình ảnh có thể được cắt một chút.
  6. Giải pháp di động.
  7. Đặt hình ảnh hiển thị là ngẫu nhiên.
  8. Hình ảnh phải được hiển thị từ trái sang phải (ngăn sử dụng các cột).

Tôi đã đạt được điều đó với giải pháp flexbox sau:

Hiển thị đoạn mã

Giải pháp hoạt động, nhưng tùy thuộc vào kích thước của cửa sổ, một số hình ảnh được phóng to quá mức, tôi sẽ thích nhiều yếu tố hơn trên mỗi hàng, ngay cả khi các mục cần được thu nhỏ hơn.

Điều này có nghĩa là thay vì: Giải pháp tạm thời

Tôi muốn mật độ vật phẩm cao hơn để hình ảnh không bao giờ bị phóng to: Ví dụ về bố trí dự kiến

Tôi đã tìm kiếm các giải pháp để tăng số lượng phần tử trên mỗi dòng trên toàn cầu để hình ảnh không bị phóng to (hoặc ít nhất là không quá nhiều: ví dụ: tối đa 10%).

Hai giải pháp hackish tôi đã tìm thấy cho đến nay là:

Giải pháp 1

Sử dụng thuộc tính thu phóng :

Hiển thị đoạn mã

Nhưng tài sản đó hoạt động rất tốt trong Chrome, không phải trong Firefox.

Giải pháp 2

Mô phỏng thuộc tính thu phóng với chiều rộng / chiều cao và biến đổi: scale : scale :

Hiển thị đoạn mã

Giải pháp đó đã hoạt động cho đến nay, nhưng yêu cầu một vài hack, và không còn thanh lịch và bây giờ sẽ có tác động với các yếu tố khác của trang.

Có giải pháp nào khác, định hướng flexgrid hơn cho phép loại điều khiển đó không? Tôi đã thử sử dụng flex-grow: 0 : nó, thực sự, vô hiệu hóa các mục đang phát triển, nhưng sau đó có những khoảng trống xung quanh hình ảnh ở khắp mọi nơi.

css  flexbox  image-gallery 
— Patrick Allaert
nguồn

Câu trả lời:

1

Tôi sửa đổi nỗ lực bắt đầu của bạn.

Ý tưởng chính là thay đổi img width: 100%;để width: auto;và chỉ định liên kếtheight . Điều này sẽ cho chúng ta hình ảnh với những khoảng trống.

Để loại bỏ các khoảng trống, chúng tôi có thể thêm vào các liên kết display: flex;và flex-direction: column;. Sắp xong.

Bước cuối cùng là thêm vào các liên kết max-width: 100%;, nó sẽ bảo vệ khỏi ovelflow nếu hình ảnh widthsẽ rộng hơn cột trong màn hình nhỏ. Vấn đề như vậy chúng ta có thể thấy trong giải pháp đầu tiên của Temani Afif với hình ảnh thứ 4, nếu chúng ta đặt heightliên kết cao hơn .Đã chỉnh sửa

Nhìn vào đoạn trích.

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>
Mở rộng đoạn trích

— Alexanderr Belugin
nguồn
Đây là câu trả lời tốt nhất cho đến nay. Nó không cho kết quả giống như sử dụng zoomvì nó sửa tất cả các hàng có cùng chiều cao, bằng cách đó: nó ngăn thuật toán flex tự nhiên "thích ứng" với thứ gì đó "tối ưu nhất có thể". Theo như tôi hiểu, vẫn chưa thể đạt được những gì tôi muốn theo cách tương thích và không hack.
— Patrick Allaert
0

Đây là một ý tưởng mà bạn có thể xem xét chiều cao để kiểm soát kích thước của các hàng và mẹo chính là dựa vào min-width:100% hình ảnh của bạn để lấp đầy khoảng trống.

Về cơ bản, asẽ xác định chiều cao, hình ảnh sẽ theo chiều cao đó và sẽ tính autochiều rộng để giữ tỷ lệ. Chiều rộng của hình ảnh sẽ xác định chiều rộng của liên kết và sau đó liên kết sẽ phát triển để lấp đầy không gian (tạo không gian bên trong nó). Cuối cùng, min-width:100%bạn sẽ làm cho hình ảnh lấp đầy không gian được tạo bên trong liên kết.

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>
Mở rộng đoạn trích

Nếu bạn xem xét vwđơn vị cho chiều cao, bạn sẽ có một lưới tĩnh sẽ chia tỷ lệ trong khi vẫn giữ nguyên cấu trúc bên trên:

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>
Mở rộng đoạn trích

— Temani Afif
nguồn
-2

một cách bạn có thể giải quyết là bằng cách thêm line-height: 0vào avà đặt heightgiá trị bằng pxgiá trị.

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>
Mở rộng đoạn trích

— Matan Sanbira
nguồn
Điều này thay đổi chiều cao của mỗi hàng, nó không cho phép nhiều mục hơn trên mỗi hàng như với hiệu ứng thu phóng hoặc hack tương đương.
— Patrick Allaert
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.