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

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>