我目前正在为客户开发一个网站,但我正在努力制作这样的图像网格:
但是,对我来说最难实现的部分是:设置一个包含 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>
在此先感谢您的宝贵帮助!
最佳答案
也许不是最好的方法,但其中一种方法就是这样。希望对您有所帮助。
.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>
关于html - 如何在 react-app 应用程序上使用 css 自定义图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54015904/