我正在建立一個用于家庭作業的網頁，我正在努力將四張不同尺寸的照片放入一個網格布局中。更具體地說，我必須使該網格布局在桌面視圖上回應為4個網格布局，在平板視圖和移動視圖上回應為2個網格布局。我已經從不同的文章中嘗試了很多建議，但似乎都沒有效果。
CSS代碼：
.services{
float: left;
寬度：25%。
height:100vh;
最大寬度:100%。
object-fit:覆寫。
}
@media only screen and (max-width: 1180px) {
.服務{
寬度：50%。
}
}
HTML代碼：
<div>
<div class="services">
<img src=" 。 /Photos/services-1.jpg">< /img>
</div>/span>
<div class="services">
<img src=" 。 /Photos/services-2.jpg">< /img>
</div>/span>
<div class="services">
<img src=" 。 /Photos/services-3.jpg">< /img>
</div>/span>
<div class="services">
<img src=" 。 /Photos/services-4.jpg">< /img>
</div>/span>
</div>/span>
當前外觀：
我想讓照片在每個場合都排成一行，有一定的尺寸。
有什么想法嗎？
有什么想法嗎？
uj5u.com熱心網友回復：
謝謝你提交你的問題! 我建議不要使用標記來放置你的圖片，而是使用背景圖片。為什么？使用background-image，你可以使用'background-size: cover'，它可以使圖片以自定義的高度覆寫整個頁面，所以各欄都是平等的。
試圖用普通標簽來實作這一點需要某種調整器，或者影像需要有相同的寬度和高度。
下面是我的代碼! 提示：你不需要關閉標簽，你可以在沒有關閉影像標簽的情況下使用它。
HTML
<div>
<div class="services">
<div class="image-box"/span> style="background-image: url('https://source. unsplash.com/random');"></div>
</div>/span>
<div class="services">
<div class="image-box"/span> style="background-image: url('https://source. unsplash.com/random');"></div>
</div>/span>
<div class="services">
<div class="image-box"/span> style="background-image: url('https://source. unsplash.com/random');"></div>
</div>/span>
<div class="services">
<div class="image-box"/span> style="background-image: url('https://source. unsplash.com/random');"></div>
</div>/span>
CSS
.services{
float: left;
寬度：25%。
height:100vh;
最大寬度:100%。
object-fit:覆寫。
}
.service .image-box {
寬度：100%。
高度: 400px;
背景尺寸：封面。
}
@media only screen and (max-width: 1180px) {
.服務{
寬度：50%。
}
}
uj5u.com熱心網友回復：
試試這個，對于網格，你需要在父級div中定義display: grid;
.grid{
display: grid;
grid-template-columns: repeat(4,1fr);
}
.services{
高度：100%。
寬度：100%。
}
@media only screen and (max-width: 1180px) {
.grid{
顯示：網格。
grid-template-columns: repeat(2,1fr);
}
}
在HTML中，在'level'的地方添加你的圖片代碼，它將在兩個回應式中作業
<div class="grid">
<div class="service">
級別
</div>
<div class="services">
級別
</div>
<div class="services">
級別
</div>
<div class="services">
級別
</div>
</div>
如果你想讓圖片成為封面，在img class object-fit: cover;中添加這個。
這樣就可以正常作業了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/333724.html
標籤：