調整所有屏幕的動態圖像高度和寬度

Question

我正在嘗試為所有屏幕中的圖像設置動態高度和寬度。

在不同屏幕之間切換時，它給了我更多空間。 我們可以處理那些高度和寬度嗎

 .grid-container{ width: 70%; margin: 90px auto; }.box { height: 275px; } //for pic 1.box1{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); background-position:center; background-repeat:no-repeat; } //for pic2.box2{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); background-position:center; background-repeat:no-repeat; } //for pic3.box3{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); background-position:center; background-repeat:no-repeat; } //for pic4.box4{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); background-position:center; background-repeat:no-repeat; }.box5{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); background-position:center; background-repeat:no-repeat; }.sub-con { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; } @media only screen and (max-width: 1000px) {.sub-con { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 700px) {.sub-con { grid-template-columns: 1fr; } }

 <div class="grid-container"> <div class="sub-con"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="box3 box"></div> <div class="box4 box"></div> <div class="box5 box"></div> </div> </div>

Answer 1

您可能正在尋找background-size: contain ，它以最大高度和/或寬度顯示圖像，它可以在元素的給定空間內實現，而不是讓圖像以其固有大小顯示，這是在給出的代碼中發生的情況這個問題，所以在 200x200 圖像周圍的每個網格元素中都有相當大的差距。

看到這個片段（去整頁）：

 .grid-container{ width: 70%; margin: 90px auto; }.box { height: 275px; background-size: contain; background-position:center; background-repeat:no-repeat; }.box1{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); }.box2{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); }.box3{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); }.box4{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); }.box5{ background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); }.sub-con { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; } @media only screen and (max-width: 1000px) {.sub-con { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 700px) {.sub-con { grid-template-columns: 1fr; } }

 <div class="grid-container"> <div class="sub-con"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="box3 box"></div> <div class="box4 box"></div> <div class="box5 box"></div> </div> </div>