圖片庫 HTML CSS

Question

我在我的畫廊中調整圖像大小時遇到問題，我一直在閱讀多個線程和 yt 視頻，但我自己似乎無法弄清楚

問題圖片：

 * { box-sizing: border-box; }.gallery { border: 1px solid #ccc; }.gallery img { width: 100%; height: auto; }.des { padding: 15px; text-align: center; }.responsive { padding: 0 6px; float: left; width: 25%; }

 <h1>Veckans deals.</h1> <div class="responsive"> <div class="gallery"> <a href="vdeals_ett:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_two:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_tre:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_fyra:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div>

Answer 1

如果不為所有圖像設置固定高度，則無法在使用float時使它們全部拉伸。 你有三個選擇。

1. 在圖像上設置一個固定的高度並使用object-fit: cover使它看起來像在拉伸，而實際上它正在覆蓋它
2. 在圖像上使用 flexbox 和flex-grow: 1 （ 請參閱此示例，推薦！）
3. 將所有圖像調整為具有相同的寬度和高度，如果它們可以統一的話。

Answer 2

我確信圖像具有不同的分辨率。 前 2 張圖像具有相同的分辨率，例如 3:2。 最后 2 張圖像具有相同的分辨率，例如 2:1，但與前 2 張圖像不同。 請嘗試固定圖像的分辨率。

Answer 3

您的圖像的高度/寬度不同，就像我在為您制作片段時找到您的圖像一樣。 所以決定哪個方向很重要並使用 vh/vw 和 auto

更多在這里

 * { box-sizing: border-box; }.gallery { border: 1px solid #ccc; }.gallery img { width: auto; height: 15vh; }.des { padding: 15px; text-align: center; }.responsive { padding: 0 6px; float: left; width: 25%; }

 <h1>Veckans deals.</h1> <div class="responsive"> <div class="gallery"> <a href="vdeals_ett:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_two:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_tre:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div> <div class="responsive"> <div class="gallery"> <a href="vbild_fyra:jpg" target="_blank"><img src="https.//topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200"></a> <div class="des">Add a desciption of the picture</div> </div> </div>