[英]make image fit to division in responsive way
我正在嘗試將整個圖像放入分區中,並希望使用媒體查詢使其響應。 主要目的是在不拉伸圖像的情況下將圖像放入容器內,並且圖像應該適合 div 標簽。 因此,即使我們拉伸屏幕,圖像也應該在容器內響應,即使我縮小屏幕,它也應該在容器內響應。
我一直在嘗試多種方式。 我的最終代碼是
.grid-container{ width: 70%; margin: 90px auto; }.box { height: 200px; width: 100%; min-height: 200px; position: relative; }.box1{ background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat; height: 100%; position:relative; background-size: cover; background-position: center; }.box2{ background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat; opacity: 1; background-position:contain; background-repeat:no-repeat; }.box3{ background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat; opacity: 1; background-position:contain; background-repeat:no-repeat; }.box4{ background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat; opacity: 1; background-position:contain; background-repeat:no-repeat; }.box5{ background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat; opacity: 1; background-position:contain; 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>
請嘗試以下 css
img {
max-width:100%;
height:auto;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.