我對 HTML 和 CSS 不太熟悉，我在解決問題時遇到了一些問題。
我正在嘗試將圖片精確地放在網格上，并使網格在頁面的中心可見，實際上它是。
我看到有很多關于此的問題，我試圖查看問題的答案并嘗試解決我的問題，但實際上并沒有奏效。所以我希望任何人都可以幫助我解決這個問題。
提前感謝您的時間。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item"><img src="6.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="3.png" class="img"> </div>
<div class="grid-item"></div>
<div class="grid-item"><img src="3.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="7.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="2.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="2.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="3.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="4.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="2.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="5.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="4.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="4.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="8.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="5.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="5.png" class="img"></div>
<div class="grid-item"></div>
<div class="grid-item"><img src="9.png" class="img"></div>
</div>
</body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: #8B38BE;
padding: 70px;
margin: auto;
width: 700px;
}
.grid-item {
background-color: #E0E7FF;
border: 1px solid black;
padding: 40px;
text-align: center;
}
.grid-item > img {
max-width: 100%;
height: auto;
object-fit: cover;
display: block;
}
uj5u.com熱心網友回復：
好的，你可以這樣做：
.grid-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: #8B38BE;
padding: 70px;
margin: auto;
width: 700px;
}
.grid-item {
background-color: #E0E7FF;
border: 1px solid black;
padding: 40px;
text-align: center;
position:relative;
}
.grid-item > img {
width: 100%;
object-fit: cover;
display: block;
object-fit: cover;
position:absolute;
left: 0;
top: 0;
height: 100%;
}
因此，在這種情況下，您將 img 放置為絕對的，并且高度和寬度與 grid-item 相同。但是隨后您將添加object-fit這將使影像非常適合網格專案。
uj5u.com熱心網友回復：
據我了解，您正在嘗試將網格居中，但您可以通過多種方式做到這一點，但我不確定您的樣子。我不確定它是否加載了任何 CSS 或根本不做任何事情。如果你愿意，你可以制作一個包含所有內容的 div 并執行以下操作：
.grid {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
}
我希望這會有所幫助，雖然你的問題對我來說有點不清楚}
uj5u.com熱心網友回復：
這里我使用了縱橫比。請在您的代碼中更新以下 css。我希望這有助于您的要求
.grid-item {
background-color: #E0E7FF;
border: 1px solid black;
padding-bottom: 100%;
text-align: center;
position: relative;
}
.grid-item > img {
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
uj5u.com熱心網友回復：
而不是使用.grid-item > img {}我只是將它定義為一個類（因為你告訴它，它有一個 .img 類。此外，洗掉填充并使用 height:100%
.img {
max-width: 100%;
height: 100%;
padding: 0;
object-fit: cover;
display: block;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354034.html