如何在 React NEXT.JS 中的組件下方分層圖像

Question

我正在嘗試建立一個網站並使用這個加拿大政客網站作為參考。 我喜歡他的導航欄和連接組件如何在他的圖片之上分層，以及他的圖片是如何固定長度和調整 window 的大小，它僅根據分層組件調整圖片的大小，但也保持縱橫比正確且未拉伸。

我的第一個問題是我正在使用 NEXT.JS 圖像組件，我無法弄清楚如何讓它在保持固定大小的同時復制不拉伸的行為。

我是一個 python 男孩，我剛加入這個項目，所以我的第二個問題是我制作了一個導航欄組件，並且打算使用該組件代替他的連接組件，但我不知道他的網站如何很好地分層。 我應該朝哪個方向看。 謝謝你

Answer 1

這更像是 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 問題，而不是 NEXT.JS 問題。

關鍵是使用圖像作為<div>標簽（或任何標簽）的背景，而不是<img>標簽。 使用以下屬性

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