如何在保持縱橫比的同時縮放背景圖像以適應屏幕的整個寬度？ 當我使用“封面”時，高度被切斷

Question

客觀的

這是我的網站https://saddhustore.com.br/moda/ 。 我希望頂部的主圖像按比例縮小以適應 1366x768 屏幕，就像在我的 1920x1080 中一樣，顯示所有圖像，而不會扭曲縱橫比。

我嘗試了什么

我在 WordPress 中使用 Elementor。 在“自定義 CSS ”部分中，我嘗試添加以下代碼：

selector {
    background-size: cover; OR background-size: contain; OR background-size: 100% auto;
}

使用封面時，我嘗試添加background-attachment: fixed和height: 100%無濟於事。

應用 MAGGI 的建議后的結果

注意最底部被切斷

出於某種原因，它在 Elementor 中看起來很完美

Answer 1

在 css 中添加以下代碼（注意：像這樣將選擇器的高度設置為手動）：

 selector { background-size: cover; background-repeat:no-repeat; background-position:center; height: 50vh /*manual add*/; width:100vw; }