帶有Flexbox的自適應照片佈局

使用Flexbox實現自適應照片佈局，輕量級且高效！本文介紹一種輕量級方法，利用Flexbox創建水平瀑布流式照片佈局，無需JavaScript，即可實現任意尺寸照片的無縫排列。

這種方案不僅輕量級，而且非常簡單。我們只需要一個無序圖像列表和17行CSS代碼，核心在於Flexbox和object-fit屬性。

為什麼選擇這種方法？

我有兩個愛好：用照片記錄生活，以及探索CSS屬性（新舊皆可）的有趣組合方式。

幾週前，我參加了XOXO活動，拍攝了大量照片，最終篩選出39張精美的照片。為了更好地管理自己的內容，過去幾年我一直想創建一個簡單的照片博客，但始終無法實現我理想中的佈局：一個簡單的瀑布流佈局，照片在保持其縱橫比的同時填充行（想想iOS上的照片應用、Google相冊、Flickr……）。

我做了一些研究，看看是否有任何輕量級的、非JavaScript的選項，但找不到任何符合我需求的方案。在等待航班延誤期間，我開始嘗試一些代碼，並限制自己盡可能保持代碼簡潔（因為這正是我認為的樂趣所在）。

基本HTML結構

由於我基本上是創建一個圖像列表，所以我選擇了一個無序列表：

<li> <li> <!-- ... more images ... -->

Flexbox的妙用

然後是一系列靈光乍現的時刻：

<li> Flexbox非常適合通過根據單元格內容確定單元格寬度來填充行。 <li>這意味著所有圖像（橫向或縱向）都需要具有相同的高度。 <li>我可以使用object-fit: cover;來確保圖像填充單元格。

理論上，這聽起來像是一個可靠的方案，它讓我得到了一個我90%滿意的結果。

 ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

注意： 40vh對於桌面瀏覽器來說似乎是最佳的初始方法，它以合理的大小顯示兩行完整的照片，並暗示下面還有更多照片。這也允許每行顯示更多照片，從而顯著改善縱橫比。

處理最後一行伸展問題

我遇到的唯一問題是Flexbox非常想填充所有行，它對最後一行照片的縱橫比做了一些奇怪的事情。這可能是我對這個佈局最不喜歡的一點，但我不得不在列表的末尾添加一個空的<li>元素。

 <!-- ... more images ... -->

<li>

結合以下CSS代碼：

 li:last-child {
  flex-grow: 10;
}

注意：這裡使用“10”並沒有什麼科學依據。在我的所有測試中，這都提供了最佳結果。

演示（此處應插入演示鏈接或代碼片段）

視口優化

在不同的視口方向下工作時，需要考慮一些因素。

豎屏

如果你的視口高度大於寬度，這種方法會限制每行的照片數量，從而影響其縱橫比。要解決這個問題，你可以使用簡單的媒體查詢使照片行變矮：

 @media (max-aspect-ratio: 1/1) {
  li {
    height: 30vh;
  }
}

較短的屏幕

為了適應橫向的小型設備，增加照片的高度有助於盡可能大顯示照片：

 @media (max-height: 480px) {
  li {
    height: 80vh;
  }
}

較小的屏幕豎屏

大多數手機不夠寬，無法讓Flexbox在不縮小照片的情況下正常工作，所以我選擇不嘗試每行容納多張照片。儘管如此，在這裡設置最大高度仍然值得，這樣你至少可以瞥見列表中的下一張照片。

 @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  ul {
    flex-direction: column; /* 改為列方向*/
  }

  li {
    height: auto;
    width: 100%;
  }

  img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
  }
}

總結

這種方法並沒有完全尊重照片的縱橫比（但已經很接近了），並且偶爾會導致一些奇怪的結果，但我絕對喜歡它的簡潔性和靈活性。想要讓你的畫廊水平滾動而不是垂直滾動？只需進行一些調整即可實現。畫廊中有1000張照片還是只有一張？看起來都很好。不確定縱橫比？ Flexbox是你的最佳選擇。如果你還沒有查看演示，請再看一遍，並告訴我你的想法！

額外提示

根據這些照片的大小，這樣的頁面可能會很快增長到幾兆字節。在我的博客中，我添加了loading="lazy"來解決這個問題。使用該屬性後，圖像只會在您滾動時接近它們時才加載。目前它只在Chrome中受支持，但您可以自己編寫一個更廣泛支持的技術。

以上是帶有Flexbox的自適應照片佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！