如何在NEXT.JS中将图像分层到组件下面

Question

我试图建立一个网站，并以加拿大政治家站点作为参考。我喜欢他的肚脐和连接组件层在他的图片之上，他的图片是一个固定的长度和大小的窗口大小调整图片只是一点点基于分层组件，但也保持了纵横比正确和未拉伸。

我的第一个问题是我正在使用NEXT.JS图像组件，我想不出如何使它在保持固定大小的情况下复制不拉伸的行为。

我是个蟒蛇男孩，我刚开始做这个项目，所以我的第二个问题是，我做了一个导航栏组件，我要用这个组件来代替他的join组件，但是我不知道他的网站层是怎么这么好的。我该往哪个方向看。谢谢!

Answer 1

这与其说是NEXT.JS问题，不如说是css问题。

关键是使用图像作为<div>标记(或任何标记)的背景，而不是<img>标记。使用下列属性

background-image: url('....');
background-position: center;
background-size: cover;
background-repeat: no-repeat;