我正在努力使我的背景图像适合屏幕而不被剪切。我使用Wordpress和Divi主题，我还添加了额外的CSS。这是我用来制作带有完整背景图像的页面的代码
.page-id-7 {
background-image: url(https://www.rossabbink.com/wp-content/uploads/2020/11/Homepage-Image-I.jpg);
background-size: cover;}
以下是Wordpress附加CSS 的所有代码
.select_page { visibility: hidden; }
span.mobile_menu_bar:before {
color: rgba(30, 30, 30) !important;} .et_mobile_menu { border-top: 3px solid rgba(225, 225, 220);} /* First we have to make the main header transparent */ .page-id-7 #page-container {
padding-top: 0 !important; } .page-id-7 #main-footer { position: absolute; bottom: 0; width: 100%; } /* Here we make the content of our page builder sections transparent. This is so that the background image shows through */ .et_pb_section { background-color: transparent; } /* Here we set the background image for our specific pages. We also set the background image to cover so that it always fills the screen */ .page-id-7 { background-image: url(https://www.rossabbink.com/wp-content/uploads/2020/11/Homepage-Image-I.jpg); background-size: cover; } @media all and (max-width: 980px) { #mobile_menu { background-color: rgba(119, 119, 119, 119) !important;} } .mobile_nav.closed #mobile_menu, .mobile_nav.opened #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: linear-gradient(
rgba(205, 205, 205),
rgba(66, 66, 66, 0.50) ),url("https://www.rossabbink.com/wp-content/uploads/2020/11/dropdown.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover; } .mobile_nav.opened .mobile_menu_bar:before { content: '4d'; }
我试图解决的问题是，我希望图像覆盖屏幕，同时不要试图覆盖屏幕而被裁剪掉，而是要完美地贴合屏幕。
提前感谢
不可能得到一个完美适合每个设备屏幕的图像。不幸的是，设备有不同的纵横比，更不用说当用户将设备从横向设置为纵向模式或桌面用户调整窗口大小时会发生什么。
如果显示所有图像很重要，那么使用背景图像：包含-保证显示整个图像，但对于某些视口，它们的纵横比与您的图片不同，两侧或顶部和底部都会有空间(假设您使用背景大小中心。
你会经常在视频中注意到这种事情，视频的上方和下方(或两侧(都会有黑色的"条"。也许你能做的最好的事情就是有一个合适的背景色，或者只是黑色或白色。
(当然，如果你不在乎你的图像是否失真，你可以使用100%的宽度和高度，但这样做通常并不明智！(