在我的代码中，我使用CSS Flexbox将多个图像放在一行中。我指定的图像大小在rem，而不是在%，因为当我使用%，然后调整窗口大小后，一行中的图像数量保持不变，我不希望那样。相反，我希望当屏幕大小小于图像大小时，图像根据屏幕大小调整其大小，并且每行只保留一个图像。
我面临的问题是，当我调整窗口大小小于图像大小，那么完整的图像是不可见的。我希望图像相应地缩小。
html{
font-size:12px;
}
#heading{
font-size:1.5rem;
text-align:justify;
width:80%;
margin:auto;
word-spacing:0.5rem;
color:lightslategrey;
margin-top:2rem;
margin-bottom:3rem;
}
#gallery_header{
width:80%;
margin-left:auto;
margin-right:auto;
color:blue;
font-size:3rem;
text-align:center;
margin-bottom:2rem;
}
#gallery{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
width:80%;
margin:auto;
}
.img_container{
width:35rem;
height:30rem;
display:inline-block;
}
.img_container img{
width:35rem;
height:30rem;
display:inline-block;
}
main{
display:flex;
width:100%;
flex-direction:column;
align-items:center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
</head>
<body>
<div id="heading">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="gallery_header">
IMAGE GALLERY
</div>
<div id="gallery">
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
</div>
<script src="script.js"></script>
</body>
</html>将以下代码添加到您的CSS
@media (max-width: 767px){
.img_container{
height: 30rem;
display: inline-block;
width: 100%;
}
.img_container img{
width: 100%;
height: 30rem;
display: inline-block;
}
}