Question

我目前正在为客户的网站上工作，但是我正在努力制作这样的图像网格：

但是，对我而言，最难实现的部分是：设置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>

如何在React-App应用程序上使用CSS自定义图像？

1 个答案: