如何在不丢失部分图片的情况下使背景图片覆盖并适合屏幕？ WordPress - Divi - CSS

Question

我正在尝试让我的背景图片适合屏幕而不被裁剪。我正在使用带有 Divi 主题的 Wordpress，我也添加了额外的 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: 'd'; }

我要解决的问题是，我希望图像能够覆盖屏幕，同时不会因为试图覆盖屏幕而被裁剪，而是完美地适合它。

提前致谢

Answer 1

不可能让图像完美适合每台设备的屏幕。不幸的是，设备具有不同的纵横比，更不用说当用户将设备从横向设置为纵向模式或桌面用户调整 window.

大小时会发生什么

如果显示所有图像很重要，则使用 background-image: contain - 保证显示整个图像，但对于某些视口，它们的纵横比将与您的图片不同，并且会有 space 在两侧或顶部和底部（假设您使用 background-size center.

您会经常在视频中注意到这种情况，视频上方和下方（或两侧）会出现黑色 'bars'。也许你能做的最好的事情就是有一个合适的背景颜色，或者只是黑色或白色。

（当然，如果你不在乎你的图像是否扭曲，你可以使用 100% 宽度和高度，但这样做通常不明智！）

如何在不丢失部分图片的情况下使背景图片覆盖并适合屏幕？ WordPress - Divi - CSS

How to make background image cover and fit screen without losing part of the picture? Wordpress - Divi - CSS

css

wordpress

cover

background-image

divi