（CSS）移動設備的背景圖像調整大小的問題

/* Responsive Full Background Image Using CSS 
    * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/ 
    */ 

    body { 
     /* Location of the image */ 
     background-image: url(images/background-photo.jpg); 
     /* Image is centered vertically and horizontally at all times */ 
     background-position: center center; 
     /* Image doesn't repeat */ 
     background-repeat: no-repeat; 
     /* Makes the image fixed in the viewport so that it doesn't move when 
    the content height is greater than the image height */ 
     background-attachment: fixed; 
     /* This is what makes the background image rescale based on its container's size */ 
     background-size: cover; 
     /* Pick a solid background color that will be displayed while the background image is loading */ 
     background-color: #464646; 
     /* SHORTHAND CSS NOTATION 
    * background: url(background-photo.jpg) center center cover no-repeat fixed; 
    */ 
     min-width: 100%; 
     max-width: 100%; 
     min-height: 100%; 
     max-height: 100%; 
    } 
    /* For mobile devices */ 

    @media only all and (max-width: 768px) { 
     .logo { 
      /* The file size of this background image is 93% smaller 
    * to improve page load speed on mobile internet connections */ 
      background-image: url(images/background-photo-mobile-devices.jpg); 
      height: 300px; 
      width: 100%; 
      background-size: contain; 
      background-repeat: no-repeat; 
      background-position: center; 
     } 
    }

背景圖像在桌面瀏覽器上顯示正常，但當我在iphone 6 plus或任何其他手機上查看它時，圖像無法正確縮放，被部分切斷。誰能幫忙？謝謝。（CSS）移動設備的背景圖像調整大小的問題

來源

2015-11-28 Ashvin Ashoke

This [POST]（http://stackoverflow.com/a/12255930/2968762）可能會幫助您區分Mobile和Web頁面。因此，你可以改變你的'background-position'屬性 – Abhi

有兩種方法可以在後臺運行，並使其正常工作：您應該刪除發病：

min-width: 100%; 
 
max-width: 100%; 
 
min-height: 100%; 
 
max-height: 100%;

而且

height: 300px; 
 
width: 100%;

通過添加以下

background-size: 100% auto;

的第二種方式，使後橡膠與任何尺寸：

使長度或寬度的第一種方式是通過將下面的代碼支撐在另一代碼：

background-size: 100% 100%;

謝謝

來源

2015-11-28 07:23:32

您也可以使用或添加更多的優化：

html{ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

它會覆蓋你想要的圖像覆蓋標籤的所有HTML或身體基地。

來源

2015-11-28 08:12:27 Sow

（CSS）移動設備的背景圖像調整大小的問題

回答

相關問題