如何在保持宽高比的同时缩放背景图像以适应屏幕的整个宽度?当我使用 "cover" 时高度被截断
How to scale a background image to fit the full width of the screen while maintaining aspect ratio? Height is cut off when I use "cover"
OBJECTIVE
这是我的网站https://saddhustore.com.br/moda/。我希望顶部的主图像按比例缩小以适应 1366x768 屏幕,就像在我的 1920x1080 中一样,显示 所有内容,完全不扭曲纵横比 。
我尝试了什么
我在 WordPress 中使用 Elementor。在“Custom CSS”部分,我尝试添加以下代码:
selector {
background-size: cover; OR background-size: contain; OR background-size: 100% auto;
}
当使用封面时,我尝试添加 background-attachment: fixed
和 height: 100%
无济于事。
采纳美极建议后的结果
注意最底部的部分被截掉了
出于某种原因,它在 Elementor 中看起来很完美
在css中添加以下代码
(注意:像这样将选择器的高度设置为手动):
selector {
background-size: cover;
background-repeat:no-repeat;
background-position:center;
height: 50vh /*manual add*/;
width:100vw;
}
OBJECTIVE
这是我的网站https://saddhustore.com.br/moda/。我希望顶部的主图像按比例缩小以适应 1366x768 屏幕,就像在我的 1920x1080 中一样,显示 所有内容,完全不扭曲纵横比 。
我尝试了什么
我在 WordPress 中使用 Elementor。在“Custom CSS”部分,我尝试添加以下代码:
selector {
background-size: cover; OR background-size: contain; OR background-size: 100% auto;
}
当使用封面时,我尝试添加 background-attachment: fixed
和 height: 100%
无济于事。
采纳美极建议后的结果
注意最底部的部分被截掉了
出于某种原因,它在 Elementor 中看起来很完美
在css中添加以下代码 (注意:像这样将选择器的高度设置为手动):
selector {
background-size: cover;
background-repeat:no-repeat;
background-position:center;
height: 50vh /*manual add*/;
width:100vw;
}