这是片段。看起来这里看起来还可以。但在我的浏览器中，最后一张图片溢出到蓝色部分。它下面的文字根本不显示。溢出的是ul的3里。
/****************
Global style
****************/
body {
margin: 0;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1, h2 {
margin: 0;
padding: 10px 0;
}
p {
margin: 0;
padding: 10px 10px;
}
li {
list-style: none;
}
.btn {
background-color: #e3e3e3;
text-decoration: none;
padding: 3px 5px;
border 1px solid black;
}
/*****************
SHOWCASE
*****************/
#showcase {
min-height: 400px;
color: white;
}
#showcase .backimage {
position: absolute;
background: url("https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg");
z-index: -2;
height: 400px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.8;
}
.showcasecontent {
padding: 0 60px;
}
/*******
section A
*************/
.section-a {
background: #8e24aa;
color: white;
}
/*******
section B
*************/
.section-b {
padding: 15px;
background-color: #363636;
}
.licontent {
background: white;
margin-bottom: 10px;
}
.img-responsive{
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
/***********
Section C
***********/
.section-c {
padding: 15px;
background: #1e88e5;
color: white;
}
/**********
Section-D
***********/
.section-d .box {
padding: 15px;
}
.box1 {
color: black;
background: #76ff03;
}
.box2 {
background: #ffc107;
}
footer {
background: black;
color: white;
padding: 15px;
}
/************
Media query
***************/
@media (min-width:700px) {
.grid {
display: grid;
}
}
/**@media (min-width: 700px) {
.grid {
display:grid;
grid-template-columns:1fr repeat(2, minmax(2,(auto,25em))
}
.content-wrap,
.section-b ul {
grid-column: 2/4;
}
.box, footer div {
grid-column: 2/4;
}
}**/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="responsivegrif.css" type="text/css">
<title>responsivegrid</title>
</head>
<body>
<div id="showcase" class="grid">
<div class="image">
<div class="backimage"></div>
</div>
<div class="showcasecontent">
<div class="welcome">
<h1>Welcome To My Responsive Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem pariatur, esse accusamus quis magni eveniet est veritatis asperiores temporibus iusto laborum illo eos doloremque dolorum corporis aut in nostrum sapiente.</p>
<a class="btn" href="#">Read more</a>
</div>
</div>
</div>
<div>
<div class="main">
<div class="section-a showcasecontent grid">
<h2>This is section A</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis amet excepturi consequatur rem libero non corporis asperiores tempore, minus nostrum?</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni culpa beatae nemo. Praesentium, blanditiis sequi ducimus accusamus iure tempore expedita.</p>
</div>
</div>
<div class="section-b grid">
<ul>
<li>
<div class="li">
<img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
</div>
</li>
<li>
<div class="li">
<img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
</div>
</li>
<li>
<div class="li">
<img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
</div>
</li>
</ul>
</div>
<div class="section-c grid">
<div class="content-wrap">
<h1>Section C</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur rem, sunt laborum blanditiis dolor tempora architecto doloremque amet dolorem autem.</p>
</div>
</div>
<div class="section-d grid">
<div class="box box1">
<h1>BOX 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit eveniet, veritatis laborum blanditiis officia nesciunt sed porro, molestias ullam quisquam.</p>
</div>
<div class="box box2" >
<h1>BOX 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quibusdam mollitia possimus accusamus delectus, pariatur ipsa ducimus tenetur neque facere!</p>
</div>
</div>
</div>
<footer class="grid">
<div>
<p>This is the footer</p>
</div>
<div>
<p>This is the footer</p>
</div>
</footer>
</body>
</html>大家好，我正在尝试通过 CSS 网格创建一个响应式页面。但是其中一个图像溢出了。所以我将网格类设置为本节最后一列图像流
<div class="section-b grid">
<ul>
<li>
<div class="li">
<img src="item-1-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
</div>
</li>
<li>
<div class="li">
<img src="item-2-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
</div>
</li>
<li>
<div class="li">
<img src="item-3-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
</div>
</li>
</ul>
这是 CSS
@media (min-width:700px) {.grid {display: grid;}}
最佳答案
尝试在 img 标签内使用“img-responsive”类，如果您使用的是 Bootstrap 。如果没有，则在 css 文件中添加类“img-responsive”。
CSS
.img-responsive{
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
html
<img class="img-responsive" src="https://farm1.staticflickr.com/1/2759520_6dea8b9007.jpg" alt="Greece-1173 - Temple of Athena by Dennis Jarvis, on Flickr">
关于html - 网格图像溢出其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47788175/