响应式图片伸缩库
Posted
技术标签:
【中文标题】响应式图片伸缩库【英文标题】：Responsive image flex gallery 【发布时间】：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;
【问题讨论】：
【参考方案1】：这个例子是一个mobile-first 响应式画廊，带有flex 和grid，适用于移动设备、平板电脑和台式机尺寸，希望对您有所帮助。
/* For mobile phones: */
.members-grid
display: grid;
grid-gap: 5px;
justify-items: center;
.members-grid .size
width: 100%;
.members
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.members img
margin: 5px;
.members .size
width: 100%;
/* For tablets: */
@media only screen and (min-width: 600px) and (max-width: 768px)
.members-grid
grid-template-columns: auto auto;
.members
.members .size
width: 45%;
/* For desktop: */
@media (min-width: 768px)
.members-grid
grid-template-columns: auto auto auto;
.members
.members .size
width: 30%;
<h3>display:flex</h3>
<div class="members ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
</div>
<h3>display:grid</h3>
<div class="members-grid ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
<img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " class="size ">
</div>【讨论】：
以上是关于响应式图片伸缩库的主要内容，如果未能解决你的问题，请参考以下文章