如何使背景圖像大小響應桌面和移動？

Question

我想在我的主頁上有一個在桌面上全寬的背景圖像，但隨着屏幕尺寸的縮小，圖像右側越來越少的部分應該消失（但總是顯示左側邊緣和對象在圖像的左側）。

我為此擁有的 CSS 代碼如下；

.sm-img-bg-fullscr {
  background-position: 0% 0px;
  background-size:auto;

  width: 100%;
  display: block;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background-repeat: no-repeat;
}

調用這個類的html如下；

<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">

我嘗試調整背景大小變量和背景位置變量，但沒有運氣。 使用的圖像為 1920 x 1080。

我想知道當屏幕寬度足夠大時，CSS 參數的什么組合將允許顯示完整圖像，並且隨着屏幕尺寸變窄，它會移除越來越多的圖像右側，使得只圖像的左側可見。

Answer 1

你試過這個嗎？

background-position: center;

Answer 2

為什么不使用媒體查詢來調整某些屏幕尺寸的圖像背景？

我們所做的就是調整background-position 。

 body { margin: 0; padding: 0} *{ box-sizing:border-box} .image { width:100vw; height:100vw; background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg"); background-repeat:no-repeat; background-position:center center; background-size: cover } @media only screen and (min-width:1px) and (max-width:700px) { .image { background-position:left center; } }

 <div class="image"> </div>

Answer 3

在你的 CSS 中試試這個

{background-size: auto;}  

或嘗試使用max-width: ??.px內聯樣式