HTML CSS 圖像庫不使用自動或拉伸制作正方形

Question

我想創建一個 2 列 3 行的圖像方形圖像庫。 由於某種原因，在編寫代碼時，框的高度未填充網格。 如何使圖像的高度與寬度成正方形？ 下面的代碼、CSS 和 HTML。 圖像應該是邊對邊的，如果可能的話，不要命名像素大小。 不是有拉伸屬性之類的嗎？ 試圖讓它發揮作用，

 .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0; padding: 0px; } img { width: 100%; height: auto; padding: 0px; }

 <div class="grid-container"> <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"> <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"> <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"> <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg"> <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg"> </div>

Answer 1

如果要填充框高度。 您應該對網格容器使用 align-items 的“ stretch ”屬性。

.grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);.
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
        padding: 0px;
        align-items: stretch;
    }

演示代碼

Answer 2

嘗試以下代碼。

 .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } img { width: 100%; height: 140px; }

 <div class="grid-container"> <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"> <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"> <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"> <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg"> <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg"> </div>

還要確保使用相同大小的圖像，以防您想使用height:auto

Answer 3

這是您的解決方案，當您調整窗口大小時，圖像將自動調整大小。

 .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0; padding: 0px; align-items: stretch; /* Default. Items are stretched to fit the container */ } img { width: 100%; height:auto; padding: 0px; }

 <div class="grid-container"> <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"> <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"> <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"> <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg"> <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg"> </div>

這是你的源代碼鏈接你的源代碼