響應css網格圖庫

Question

我正在嘗試創建一個響應式CSS網格圖庫。 我在容器內部的html中有18個div。 我給了他們不同的課程。 我遇到的第一個問題是我想要用垂直類來跨越第一個圖像。 正如你在我的CSS中看到的，我添加了grid-column：span 2; 到了班級。垂直。 當我這樣做時，圖像跨越兩列，但圖像調整大小並在垂直和水平方向上變大。 我只想橫跨兩個網格橫跨它。 現在到了第二個問題。 當我使用網格行：span 2在圖像上使用.vertical類時，下面的圖像向上移動但是具有垂直類的圖像根本不垂直。 我將在下面提供我的代碼。 謝謝你的指導。

 img{ width:100%; height:auto; } .container{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 5px; } .horizontal{ grid-column:span 2; } .vertical{ grid-row:span 2; }

 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <div class="horizontal"><img src="christian.jpg"></div> <div class="vertical"><img src="1.jpg"></div> <div class="tva"><img src="2.jpg"></div> <div class="tre"><img src="3.jpg"></div> <div class="fyra"><img src="4.jpg"></div> <div class="fem"><img src="5.jpg"></div> <div class="sex"><img src="6.jpg"></div> <div class="sju"><img src="7.jpg"></div> <div class="vertical"><img src="christian.jpg"></div> <div class="ett"><img src="1.jpg"></div> <div class="tva"><img src="2.jpg"></div> <div class="tre"><img src="3.jpg"></div> <div class="fyra"><img src="4.jpg"></div> <div class="fem"><img src="5.jpg"></div> <div class="sex"><img src="6.jpg"></div> <div class="sju"><img src="7.jpg"></div> <div class="sex"><img src="6.jpg"></div> <div class="sju"><img src="7.jpg"></div> </div> </body> </html>

圖片

Answer 1

您提供的代碼的主要問題是width: 100%您為img設置的width: 100%屬性。 將其更改為max-width將不允許圖像在列/行之外擴展。 我還添加了object-fit: cover到img以便它們適當地填充空間。

 img{ object-fit: cover; max-width: 100%; height: auto; } .container{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 5px; } .horizontal{ grid-column: span 2; } .vertical{ grid-row: span 2; }

 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <div class="horizontal"><img src="http://placekitten.com/1000/500"></div> <div class="vertical"><img src="http://placekitten.com/500/1000"></div> <div class="tva"><img src="http://placekitten.com/400/400"></div> <div class="tre"><img src="http://placekitten.com/400/400"></div> <div class="fyra"><img src="http://placekitten.com/400/400"></div> <div class="fem"><img src="http://placekitten.com/400/400"></div> <div class="sex"><img src="http://placekitten.com/400/400"></div> <div class="sju"><img src="http://placekitten.com/400/400"></div> <div class="vertical"><img src="http://placekitten.com/500/1000"></div> <div class="ett"><img src="http://placekitten.com/400/400"></div> <div class="tva"><img src="http://placekitten.com/400/400"></div> <div class="tre"><img src="http://placekitten.com/400/400"></div> <div class="fyra"><img src="http://placekitten.com/400/400"></div> <div class="fem"><img src="http://placekitten.com/400/400"></div> <div class="sex"><img src="http://placekitten.com/400/400"></div> <div class="sju"><img src="http://placekitten.com/400/400"></div> <div class="sex"><img src="http://placekitten.com/400/400"></div> <div class="sju"><img src="http://placekitten.com/400/400"></div> </div> </body> </html>

響應css網格圖庫

問題描述

1 個解決方案

解決方案1
0 2019-03-20 13:38:59

響應css網格圖庫

問題描述

1 個解決方案

解決方案1 0 2019-03-20 13:38:59

解決方案1
0 2019-03-20 13:38:59