在 css-grid 行中插入的图像导致 parent 溢出
Image inserted in css-grid row causes parent to overflow
我使用 CSS 网格创建了整个页面布局。它分为五个部分（导航、页脚等）。其中一个部分（下面代码中的#siteAds）也是一个网格，由一列和五行组成。我想在这些行之一中插入图像，我正在使用以下内容使其适合：
img {
object-fit: cover;
width: 100%;
height: 100%;
}
编辑：我的问题是添加图像后，包含它的元素的大小会扩大。因为它被插入到一个已经指定大小的网格行中，所以我希望图像能够精确缩小到行的大小。换句话说，我认为无论图像是否存在，parent 元素的大小都会保持不变，但它实际上会扩展。此外，在添加图像后，此扩展会导致页面溢出并出现滚动条，尽管没有内容超出范围（至少在我的屏幕上）。请参阅下面的图片，比较图像存在时与其显示设置为 none.
时发生的情况。
图像已添加，页面溢出，尽管相关列中仍有相当多的空白 space：
图像显示设置为none，无溢出：
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.container {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 40px 1fr 40px;
grid-template-columns: 15% 1fr 25%;
grid-row-gap: 5px;
grid-column-gap: 10px;
height: 100vh;
margin: 0px;
}
header,
footer,
article,
nav,
#siteAds {
padding: 1.2em;
background: grey;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
#siteAds {
display: grid;
grid-template-rows: 7% 5% 5% 20% 1fr;
border-color: black;
border-style: solid;
}
#adsHeader {
font-size: 35px;
}
#adsSubHeading {
font-size: 20px;
border-bottom-style: solid;
border-color: black;
}
.adsImage {
object-fit: cover;
width: 100%;
height: 100%;
}
<!doctype html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<title>CSS Grid Test</title>
<body>
<div class="container">
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">
<div id="adsHeader">Text here</div>
<div id="adsSubHeading">Text here</div>
<div class="adsHeading">
<h3>Heading</h3>
</div>
<div class="adsContentImage">
<img class="adsImage" src="https://www.neweurope.eu/wp-content/uploads/2020/04/h_55941379-1068x712.jpg" alt="placeholder">
</div>
<div class="adsContentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi eu dolor sollicitudin tristique. Aenean sollicitudin, augue vel pulvinar rutrum, ex enim semper nisi, eleifend imperdiet dolor massa vel nunc. Integer eleifend non nisi
at pharetra. Vivamus rhoncus, erat non consectetur facilisis, ante arcu condimentum ante, vitae condimentum dui ante ac tellus. Maecenas interdum bibendum libero ut dictum. Morbi tortor mauris, ullamcorper eu velit ac, malesuada varius ipsum.
</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam quis pretium elit, non ultricies magna. Nunc vel nibh mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
posuere a ante a scelerisque. Suspendisse euismod et justo ac tincidunt. Mauris tortor nisi, vestibulum vel porta eu, tempor vel quam.</p>
<h4>Lorem ipsum dolor:</h4>
<ul>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
</ul>
</div>
</div>
<footer id="pageFooter">Footer</footer>
</div>
</body>
似乎系统在适配时以某种方式使用了 img 宽高比，但我无法完全解释滚动添加。
解决方法是将图像显示为带有尺寸封面的背景。它的自然 dimensions/aspect 比率不会影响元素的大小。
这是一个简单的片段，它使用 div 加上背景而不是图像。
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.container {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 40px 1fr 40px;
grid-template-columns: 15% 1fr 25%;
grid-row-gap: 5px;
grid-column-gap: 10px;
height: 100vh;
margin: 0px;
}
header,
footer,
article,
nav,
#siteAds {
padding: 1.2em;
background: grey;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
#siteAds {
display: grid;
grid-template-rows: 7% 5% 5% 20% 1fr;
border-color: black;
border-style: solid;
}
#adsHeader {
font-size: 35px;
}
#adsSubHeading {
font-size: 20px;
border-bottom-style: solid;
border-color: black;
}
.adsImage {
width: 100%;
height: 100%;
}
<!doctype html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<title>CSS Grid Test</title>
<body>
<div class="container">
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">
<div id="adsHeader">Text here</div>
<div id="adsSubHeading">Text here</div>
<div class="adsHeading">
<h3>Heading</h3>
</div>
<div class="adsContentImage">
<div class="adsImage" style="background-image: url(https://www.neweurope.eu/wp-content/uploads/2020/04/h_55941379-1068x712.jpg); background-size: cover;"alt="placeholder"></div>
</div>
<div class="adsContentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi eu dolor sollicitudin tristique. Aenean sollicitudin, augue vel pulvinar rutrum, ex enim semper nisi, eleifend imperdiet dolor massa vel nunc. Integer eleifend non nisi
at pharetra. Vivamus rhoncus, erat non consectetur facilisis, ante arcu condimentum ante, vitae condimentum dui ante ac tellus. Maecenas interdum bibendum libero ut dictum. Morbi tortor mauris, ullamcorper eu velit ac, malesuada varius ipsum.
</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam quis pretium elit, non ultricies magna. Nunc vel nibh mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
posuere a ante a scelerisque. Suspendisse euismod et justo ac tincidunt. Mauris tortor nisi, vestibulum vel porta eu, tempor vel quam.</p>
<h4>Lorem ipsum dolor:</h4>
<ul>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
</ul>
</div>
</div>
<footer id="pageFooter">Footer</footer>
</div>
</body>
我使用 CSS 网格创建了整个页面布局。它分为五个部分（导航、页脚等）。其中一个部分（下面代码中的#siteAds）也是一个网格，由一列和五行组成。我想在这些行之一中插入图像，我正在使用以下内容使其适合：
img {
object-fit: cover;
width: 100%;
height: 100%;
}
编辑：我的问题是添加图像后，包含它的元素的大小会扩大。因为它被插入到一个已经指定大小的网格行中，所以我希望图像能够精确缩小到行的大小。换句话说，我认为无论图像是否存在，parent 元素的大小都会保持不变，但它实际上会扩展。此外，在添加图像后，此扩展会导致页面溢出并出现滚动条，尽管没有内容超出范围（至少在我的屏幕上）。请参阅下面的图片，比较图像存在时与其显示设置为 none.
时发生的情况。图像已添加，页面溢出，尽管相关列中仍有相当多的空白 space：
图像显示设置为none，无溢出：
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.container {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 40px 1fr 40px;
grid-template-columns: 15% 1fr 25%;
grid-row-gap: 5px;
grid-column-gap: 10px;
height: 100vh;
margin: 0px;
}
header,
footer,
article,
nav,
#siteAds {
padding: 1.2em;
background: grey;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
#siteAds {
display: grid;
grid-template-rows: 7% 5% 5% 20% 1fr;
border-color: black;
border-style: solid;
}
#adsHeader {
font-size: 35px;
}
#adsSubHeading {
font-size: 20px;
border-bottom-style: solid;
border-color: black;
}
.adsImage {
object-fit: cover;
width: 100%;
height: 100%;
}
<!doctype html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<title>CSS Grid Test</title>
<body>
<div class="container">
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">
<div id="adsHeader">Text here</div>
<div id="adsSubHeading">Text here</div>
<div class="adsHeading">
<h3>Heading</h3>
</div>
<div class="adsContentImage">
<img class="adsImage" src="https://www.neweurope.eu/wp-content/uploads/2020/04/h_55941379-1068x712.jpg" alt="placeholder">
</div>
<div class="adsContentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi eu dolor sollicitudin tristique. Aenean sollicitudin, augue vel pulvinar rutrum, ex enim semper nisi, eleifend imperdiet dolor massa vel nunc. Integer eleifend non nisi
at pharetra. Vivamus rhoncus, erat non consectetur facilisis, ante arcu condimentum ante, vitae condimentum dui ante ac tellus. Maecenas interdum bibendum libero ut dictum. Morbi tortor mauris, ullamcorper eu velit ac, malesuada varius ipsum.
</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam quis pretium elit, non ultricies magna. Nunc vel nibh mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
posuere a ante a scelerisque. Suspendisse euismod et justo ac tincidunt. Mauris tortor nisi, vestibulum vel porta eu, tempor vel quam.</p>
<h4>Lorem ipsum dolor:</h4>
<ul>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
</ul>
</div>
</div>
<footer id="pageFooter">Footer</footer>
</div>
</body>
似乎系统在适配时以某种方式使用了 img 宽高比，但我无法完全解释滚动添加。
解决方法是将图像显示为带有尺寸封面的背景。它的自然 dimensions/aspect 比率不会影响元素的大小。
这是一个简单的片段，它使用 div 加上背景而不是图像。
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.container {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 40px 1fr 40px;
grid-template-columns: 15% 1fr 25%;
grid-row-gap: 5px;
grid-column-gap: 10px;
height: 100vh;
margin: 0px;
}
header,
footer,
article,
nav,
#siteAds {
padding: 1.2em;
background: grey;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
#siteAds {
display: grid;
grid-template-rows: 7% 5% 5% 20% 1fr;
border-color: black;
border-style: solid;
}
#adsHeader {
font-size: 35px;
}
#adsSubHeading {
font-size: 20px;
border-bottom-style: solid;
border-color: black;
}
.adsImage {
width: 100%;
height: 100%;
}
<!doctype html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<title>CSS Grid Test</title>
<body>
<div class="container">
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">
<div id="adsHeader">Text here</div>
<div id="adsSubHeading">Text here</div>
<div class="adsHeading">
<h3>Heading</h3>
</div>
<div class="adsContentImage">
<div class="adsImage" style="background-image: url(https://www.neweurope.eu/wp-content/uploads/2020/04/h_55941379-1068x712.jpg); background-size: cover;"alt="placeholder"></div>
</div>
<div class="adsContentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi eu dolor sollicitudin tristique. Aenean sollicitudin, augue vel pulvinar rutrum, ex enim semper nisi, eleifend imperdiet dolor massa vel nunc. Integer eleifend non nisi
at pharetra. Vivamus rhoncus, erat non consectetur facilisis, ante arcu condimentum ante, vitae condimentum dui ante ac tellus. Maecenas interdum bibendum libero ut dictum. Morbi tortor mauris, ullamcorper eu velit ac, malesuada varius ipsum.
</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam quis pretium elit, non ultricies magna. Nunc vel nibh mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
posuere a ante a scelerisque. Suspendisse euismod et justo ac tincidunt. Mauris tortor nisi, vestibulum vel porta eu, tempor vel quam.</p>
<h4>Lorem ipsum dolor:</h4>
<ul>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
<li>Nam quis pretium elit, non ultricies magna</li>
<li>Suspendisse euismod et justo ac tincidunt</li>
</ul>
</div>
</div>
<footer id="pageFooter">Footer</footer>
</div>
</body>