在我嘗試理解網格時，我未能完全理解如何將較大的影像擬合到網格的預定大小，這會減小影像的大小。我的影像反而放大了網格 Box1，默認情況下，box2、3、4 和 5 被推得更遠。縮小時可以看到。我已經在像我這樣的類似專案上潛伏了 2 天，并使用了他們的解決方案，但是，似乎并沒有堅持我的解決方案我讀過一些解決方案：
已編輯，用于語法。
嵌套網格中的可變影像高度 UWP 調整網格 中的影像 大小以適應 div 到更小的尺寸控制 CSS 網格布局中的影像大小 控制 包含 css 網格內影像的嵌套網格布局中的影像大小
此致
.grid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
background-color: #8b9dc3;
height: 100vh;
}
.box1 {
background-color: #3b5998;
grid-column: 1/4;
grid-row: 1/2;
z-index: 2;
padding: 1em;
}
.box2 {
grid-column: 1;
grid-row-start: 2;
grid-row-end: 12;
color: white;
}
.box3 {
background-color: #ffffff;
grid-row: 2/12;
grid-column: auto;
color: black;
}
.box4 {
align-self: stretch;
grid-column: 3;
grid-row: 2/12;
color: white;
}
.box5 {
background-color: #3b5998;
grid-column: 1/4;
}
#headerImage {
height: 100%;
object-fit: cover;
max-height: 100%;
contain: content;
}
.nested {
display: grid;
grid-template-columns: repeat(1fr);
grid-auto-rows: 100%;
grid-gap: 1px;
}
.nested > div {
border: #333 1px solid;
padding: 1em;
}
html,
body {
font-size: 14px;
font-family: "Times New Roman", Times, serif;
margin: 0;
padding: 0;
overflow: hidden;
}
.h1 {
color: black;
font: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mystyle3.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="box box1">box1
<div id="headerImage"><img src="https://wallpaperaccess.com/full/1713248.jpg" alt="a picture">BOX 1 </div>
</div>
<div class="box box2">
<div class="nested">
</div>
</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
問題是 img 是一個實際占用空間的元素。
此代碼段洗掉了該 div 和 img，而是將影像作為帶有大小封面的背景。這確保 box1 保持網格設定給定的大小。
.grid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
background-color: #8b9dc3;
height: 100vh;
}
.box1 {
background-color: #3b5998;
grid-column: 1/4;
grid-row: 1/2;
z-index: 2;
padding: 1em;
overflow: hidden;
}
.box2 {
grid-column: 1;
grid-row-start: 2;
grid-row-end: 12;
color: white;
background-color: magenta;
}
.box3 {
background-color: #ffffff;
grid-row: 2/12;
grid-column: auto;
color: black;
}
.box4 {
align-self: stretch;
grid-column: 3;
grid-row: 2/12;
color: white;
}
.box5 {
background-color: #3b5998;
grid-column: 1/4;
}
.nested {
display: grid;
grid-template-columns: repeat(1fr);
grid-auto-rows: 100%;
grid-gap: 1px;
}
.nested > div {
border: #333 1px solid;
padding: 1em;
}
html,
body {
font-size: 14px;
font-family: "Times New Roman", Times, serif;
margin: 0;
padding: 0;
overflow: hidden;
}
.h1 {
color: black;
font: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mystyle3.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="box box1" style="background-image: url(https://wallpaperaccess.com/full/1713248.jpg); background-size: cover;">box1
</div>
<div class="box box2">
<div class="nested">
</div>
</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
為避免影像調整網格大小（或使其溢位），您可以將其大小設定為 0，將 min-size 設定為 100%
例子
img {
height:0;
width:0;
min-height:100%;
min-width:100%;
object-fit:cover
}
你也可以看https://developer.mozilla.org/en-US/docs/Web/CSS/object-position一邊object-fit
片段：
.grid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
background-color: #8b9dc3;
height: 100vh;
}
.box1 {
background-color: #3b5998;
grid-column: 1/4;
grid-row: 1/2;
z-index: 2;
padding: 1em;
}
.box2 {
grid-column: 1;
grid-row-start: 2;
grid-row-end: 12;
color: white;
}
.box3 {
background-color: #ffffff;
grid-row: 2/12;
grid-column: auto;
color: black;
}
.box4 {
align-self: stretch;
grid-column: 3;
grid-row: 2/12;
color: white;
}
.box5 {
background-color: #3b5998;
grid-column: 1/4;
}
#headerImage {
height: 100%;
object-fit: cover;
max-height: 100%;
contain: content;
}
.nested {
display: grid;
grid-template-columns: repeat(1fr);
grid-auto-rows: 100%;
grid-gap: 1px;
}
.nested>div {
border: #333 1px solid;
padding: 1em;
}
html,
body {
font-size: 14px;
font-family: "Times New Roman", Times, serif;
margin: 0;
padding: 0;
overflow: hidden;
}
.h1 {
color: black;
font: bold;
}
#headerImage img {
height: 0;
width: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover
}<div class="grid">
<div class="box box1">box1
<div id="headerImage"><img src="https://wallpaperaccess.com/full/1713248.jpg" alt="a picture">BOX 1 </div>
</div>
<div class="box box2">
<div class="nested"> </div>
</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322079.html