CSS網格圖像庫：如何將所有圖像調整為相同大小並保持相同距離？
[英]CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?
問題描述
只是嘗試使用CSS網格創建一個3 x 3的簡單圖片庫。 我認為使用具有以下css樣式的容器將相等地調整它們的大小：
.portfolio {
display: grid;
grid-template-rows: repeat(3, 200px);
grid-template-columns: repeat(3, 200px);
grid-gap: 20px;
justify-content: center;
padding: 10%;
}
但是所有圖像在我的瀏覽器中都出現重疊且大小不同的情況。 我想，現在我可以采用漫長而混亂的方法，開始調整所有內容的大小。 但是，難道沒有一種簡單的方法可以將所有元素的大小調整為相等嗎？
2 個解決方案
解決方案1
2 2018-06-24 03:27:15
我了解CSS Grid是一種新的處理方式，感謝您嘗試新事物的努力。 首先，我建議您接受有關CSS網格的免費培訓CSS Grid教程 。 這將為您提供有關所有語法的基本概念。
第二點，一旦您熟悉了這些概念，我認為這（CSS網格技巧）將是您更深入地了解它的最佳指南。
現在來問你的問題。 我已經附上了片段，它基本上可以完成某種投資組合，可以將圖像擬合到特定網格中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .portfolio { display: grid; grid-template-rows: 150px 150px 150px; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; grid-template-areas: "img1 img2 img3 img4" "img5 img6 img7 img8" "img9 img10 img11 img12"; } .image1 { grid-area: img1; text-align: center; } .image2 { grid-area: img2; text-align: center; } .image3 { grid-area: img3; text-align: center; } .image4 { grid-area: img4; text-align: center; } .image5 { grid-area: img5; text-align: center; } .image6 { grid-area: img6; text-align: center; } .image7 { grid-area: img7; text-align: center; } .image8 { grid-area: img8; text-align: center; } .image9 { grid-area: img9; text-align: center; } .image10 { grid-area: img10; text-align: center; } .image11 { grid-area: img11; text-align: center; } .image12 { grid-area: img12; text-align: center; } .fit { width: 100%; height: 100%; } </style> </head> <body> <div class="portfolio"> <div class="image1"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image2"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> <div class="image3"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image4"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> <div class="image5"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image6"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> <div class="image7"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image8"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> <div class="image9"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image10"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> <div class="image11"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ1"> </div> <div class="image12"> <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg" alt="DBZ2"> </div> </div> </body> </html>
現在，您可以通過更改行或列的大小來使用它（這是用例所必需的）。 我想補充的一點是，而不是使用align-items：center，如果您想使用間距，則可以始終使用grid-template-areas進行嘗試. . . . 在任何需要的地方。
CSS網格的可能性驚人。 試一試。 希望解決方案有所幫助。
解決方案2
0 2018-11-06 13:32:15
這對我來說是竅門。 盡管圖像必須方形才能正常工作。
有點怪異，但它可以在Chrome，Firefox和Edge（IE並非粉絲）中使用。
ul { display: grid; grid-gap: 1em; grid-template-columns: repeat(3, minmax(1px, 100%)); padding-left: 0; list-style: none; } img { width: 100%; }
<ul> <li><img src="https://via.placeholder.com/350x150" alt="image"></li> <li><img src="https://via.placeholder.com/300" alt="image"></li> <li><img src="https://via.placeholder.com/150x300" alt="image"></li> <li><img src="https://via.placeholder.com/147" alt="image"></li> <li><img src="https://via.placeholder.com/200" alt="image"></li> <li><img src="https://via.placeholder.com/150" alt="image"></li> </ul>
如何將不同尺寸的圖像放入相同尺寸的 CSS 網格中，同時保持圖像的縱橫比？
[英]How can I fit images of different sizes into a CSS grid of the same size, while maintaining the aspect ratio of the images?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.