使用CSS flexbox或網格佈局的響應式圖片庫

我正在使用Image-Gallery-Widget，用戶可以在其中設置縮略圖寬度，縮略圖高度和邊距（縮略圖之間），並且該小組件將呈現所有圖像縮略圖一個很好的網格，每個圖像具有相同的寬度和高度。使用CSS flexbox或網格佈局的響應式圖片庫

我想知道css-flexbox或css-grid是否可以在不需要在代碼中定義行和列而不需要斷點/媒體查詢的情況下實現這一點。

縮略圖圖像被包裹在一個錨，所以畫廊的項目（或併網項目）將是這個樣子：

<a href="#" class="gallery-item"> 
    <img src="myimage" width="300" height="200" /> 
</a>

畫廊項目應充分填補div容器，這意味着，在一行中的最後一個縮略圖和容器div的右邊緣之間不應該有空隙（除非我們沒有足夠的項目來填充行，即當連續3個英尺ft，但我們只有8個項目時，則第三排只有兩個項目，右側有一個空隙，寬度只有一個項目）。

圖庫項目永遠不會比用戶設置的縮略圖寬度更寬，因爲我們不想降低縮略圖的質量。假設這個例子的寬度爲300px。圖庫項目之間的邊距由用戶固定和設置。如果沒有足夠的項目留下來一補行，只是左對齊他們即像這樣：

我不想在CSS定義任何斷點，也沒有添加任何HTML的行/列結構。我希望瀏覽器能夠像容器一樣放置儘可能多的圖庫項目。如果右側存在間隙（即3個縮略圖* 300px寬度= 900px，但容器寬度爲1000px），則瀏覽器應縮小網格項目，以便再添加一個圖庫項目，從而消除差距。我需要能夠爲每個圖庫項目定義一個邊距。

你可以看到所需的響應行爲，在這個GIF（改變瀏覽器的寬度時）：

您在GIF看到什麼是不Flexbox的完成，但需要一噸的CSS，我是的希望避免與flexbox。我已經對Flexbox進行了相當多的研究，但還沒有完全擺脫困境。

感謝您的任何提示！

來源

2017-02-21 zıəs uɐɟəʇs

是JS允許在這裏？ – blackmiaool

不，我正在尋找一個CSS唯一的解決方案。 –

請發佈您嘗試過的代碼。 –

使用flex功能應該足以滿足您的任務。請注意IE11中的部分支持：http://caniuse.com/#feat=flexbox。

把這些樣式的容器上：

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: space-between; 
}

樣式的包裝：

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 300px; 
    margin: 5px; 
}

風格的圖片：圖片之間

.gallery img { 
    height: 100%; 
    width: 100%; 
}

空間可以使用margin簡單定義。爲了保持圖像比例，您可以使用例如鏈接（<a>）作爲圖像的包裝（<img>）。

此外，爲了防止放大圖像，您可以在錨點上應用flex-grow,flex-basis和max-width屬性。在最後一行中拉伸圖像時也存在問題 - 對該問題的破解是將n - 1（其中n是圖像數量）容器中的空項目。

在圖像上設置width和height到100%強制他們至多max-width屬性定義的寬度自動增長，同時保持高寬比。

請檢查工作示例： FIDDLE

來源

2017-03-30 13:12:41 luke

最後一行怎麼樣？ – blackmiaool

我認爲它看起來更好地拉伸到整個線寬，不是嗎？ :) – luke

呃...我不是OP，所以我不知道。 – blackmiaool

如果你不介意使用媒體斷點，使用新CSS Grid Layout。不要忘記將它作爲IE10 +支持的前綴。

網：

.gallery { 
    display: grid; 
    grid-gap: 5px; 
}

響應圖片：

.gallery img { 
    width: 100%; 
}

媒體斷點（值在引導4-4）

@media (max-width: 575.98px) { 
    .gallery { 
     grid-template-columns: repeat(1, 1fr); 
    } 
} 
@media (max-width: 768.98px) and (min-width: 576px) { 
    .gallery { 
     grid-template-columns: repeat(2, 1fr); 
    } 
} 
@media (max-width: 991.98px) and (min-width: 768px) { 
    .gallery { 
     grid-template-columns: repeat(3, 1fr); 
    } 
} 
@media (max-width: 1199.98px) and (min-width: 992px) { 
    .gallery { 
     grid-template-columns: repeat(4, 1fr); 
    } 
} 
@media (min-width: 1200px) { 
    .gallery { 
     grid-template-columns: repeat(5, 1fr); 
    } 
}

jsFiddle

來源

2018-02-06 20:33:34 midzer

使用CSS flexbox或網格佈局的響應式圖片庫

回答

相關問題