0

今HTML,CSS,Bootstrapでページをデザインしています。

画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
画像の説明をここに入力

現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?

▼HTML

<div class="flex-container">
                <ul>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                </ul>
            </div>

▼CSS

ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  position: relative;
  width: 20%;
}
li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}

1 件の回答 1

1

以下のやり方でできました。

▼HTML

 <section class="testimonials"> 
            <div class="flex-container">
                <ul>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                </ul>
            </div>
        </section>

▼CSS

.testimonials {
  padding: 2% 0;
  background: #000;
}
.testimonials ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.testimonials li{
  position: relative;
  width: 18%;
  margin: 1%;
}
.testimonials li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.testimonials img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。