html - 如何在 react-app 应用程序上使用 css 自定义图像？

Question

我目前正在为客户开发一个网站，但我正在努力制作这样的图像网格:

example

但是，对我来说最难实现的部分是:设置一个包含 4 个图像的网格，响应式，我可以在其中移动图像下方的边框。

我试图将每个图像设置在一个 div 标签内，我给它一个边框。由于我对编码还很陌生，所以我不确定我还应该尝试什么。

div.composition {
  display: inline-block;
  float: right;
  position: relative;
}

img.composition-photo {
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;
  object-fit: cover;
  width: 250px;
  height: 250px;
  position: absolute;
}

<div className="composition">
  <div>
    <img src={ModelOne} alt="Modelo 1" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelTwo} alt="Modelo 2" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelThree} alt="Modelo 3" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelFour} alt="Modelo 4" className="composition-photo img-fluid" />
  </div>
</div>

在此先感谢您的宝贵帮助!

Answer 1

也许不是最好的方法，但其中一种方法就是这样。希望对您有所帮助。

.composition {
    position: relative;
    float: right;  
}

.composition-photo {
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;
  object-fit: cover;
  width: 250px;
  height: 250px;
}

.composition img:nth-child(1){
    position: absolute;
    top: 10px;
    right: 265px;
}
.composition img:nth-child(2){
    position: absolute;
    top: 0;
    right: 0;
}
.composition img:nth-child(3){
    position: absolute;
    top: 280px;
    right: 280px
}
.composition img:nth-child(4){
    position: absolute;
    top: 260px;
    right: 15px;
}

<div class="composition">
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 1" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 2" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 3" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 4" class="composition-photo"/>
    </div>