【发布时间】：2021-10-17 08:14:18
【问题描述】：
我正在尝试使我的 flex 图像项具有响应性。但是，我真的不知道如何使这些图像在members div 中响应。有人可以帮我吗？
HTML：
<div class = "container">
<main role = "main">
<div class = "group">
<img src = "izonebg.jpg" alt = "group" class = "groupbg">
</div>
<div class = "content-wrapper content-flex">
<div class">
<p class = "heading">ABOUT IZ*ONE</p>
</div>
<div class = "info">
<p id = "about-content">text</p>
</div>
</div>
<div class = "content-wrapper member-flex">
<div>
<p class = "heading">MEMBER</p>
</div>
<div class = "members">
<img src = "eunbi.jpg" alt = "kwon eunbi" class = "size">
<img src = "sakura.jpg" alt = "miywaki sakura" class = "size">
<img src = "hyewon.jpg" alt = "kang hyewon" class = "size">
<img src = "yena.jpg" alt = "choi yena" class = "size">
<img src = "chaeyeon.jpg" alt = "lee chaeyeon" class = "size">
<img src = "chaewon.jpg" alt = "kim chaewon" class = "size">
<img src = "minju.jpg" alt = "kim minju" class = "size">
<img src = "nako.jpg" alt = "yabuki nako" class = "size">
<img src = "hitomi.jpg" alt = "honda hitomi" class = "size">
<img src = "yuri.jpg" alt = "jo yuri" class = "size">
<img src = "yujin.jpg" alt = "ahn yujin" class = "size">
<img src = "wonyoung.jpg" alt = "jang wonyoung" class = "size">
</div>
</div>
</div>
</main>
</div>
CSS：
.groupbg{
width: 100%;
top: 0;
left: 0;
}
.heading{
font-family: Kiona;
font-size: 3.3em;
font-weight: 500;
margin: 0;
margin-top: 10px;
padding: 10px;
}
.content-wrapper{
width: 1160px;
margin: 0 auto;
}
.content-flex{
display: flex;
flex-direction: column;
}
#about-content{
font-family: Acid;
font-size: 1.3em;
margin: 0;
margin-top: 1.15em;
text-align: justify;
padding-bottom: 1em;
}
@media (max-width: 1199px){
.content-wrapper{
width: 90%;
}
}
.info{
padding-bottom: 2em;
}
@media (min-width: 935px){
.content-flex{
flex-direction: row;
}
#aboutiz{
font-size: 3.7em;
}
#about-content{
font-size: 1.75em;
margin-left: 2em;
}
}
.member-flex{
display: flex;
flex-direction: column;
}
.members{
padding-bottom: 20px;
}
.size{
width: 286px;
height: 290px;
}
【问题讨论】：
标签： html css flexbox responsive-design responsive-images