0

我正在尝试使我的背景图像适合屏幕而不被剪切。我正在使用带有 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: '\4d'; }

我要解决的问题是我希望图像覆盖屏幕，同时不要通过试图覆盖屏幕而被剪掉，而是完美地贴合它。

先感谢您

4

1 回答 1

0

It's not possible to get an image to fit every device's screen perfectly. Unfortunately devices have different aspect ratios, not to mention what happens when a user puts their device into portrait mode from landscape or a desktop user resizes the window.

If it's important to show all the image then use background-image: contain - the whole image is guaranteed to be shown but for some viewports their aspect ratios won't be the same as your picture and there will be space either at the sides or the top and bottom (assuming you use background-size center.

You'll notice this sort of thing with videos very often, and there will be black 'bars' above and below the video (or at the sides). Probably the best you can do is have a suitable background color, or just black or white.

(of course, if you don't care whether your image is distorted you can use 100% width and height, but it's not very often sensible to do that!)

于 2020-11-13T21:30:48.523 回答