响应图像弹性画廊

Question

我正在尝试让我的弹性图像项目响应。但是，我真的不知道如何让这些图像在 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;
}

Answer 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 " alt="kwon eunbi " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="miywaki sakura " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kang hyewon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="choi yena " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="lee chaeyeon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kim chaewon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kim minju " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="yabuki nako " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="honda hitomi " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="jo yuri " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="ahn yujin " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="jang wonyoung " 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 " alt="kwon eunbi " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="miywaki sakura " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kang hyewon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="choi yena " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="lee chaeyeon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kim chaewon " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="kim minju " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="yabuki nako " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="honda hitomi " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="jo yuri " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="ahn yujin " class="size ">
  <img src="https://newsi.icu/wp-content/uploads/2020/04/What-made-Money-Heist-costumes-a-symbol-of-resistance-and.jpg " alt="jang wonyoung " class="size ">
</div>

响应图像弹性画廊

Responsive image flex gallery

html

css

flexbox

responsive-design

responsive-images