(CSS) 移动设备的背景图像大小调整问题答案

【问题标题】：(CSS)Trouble having background image resize for mobile device(CSS) 移动设备的背景图像大小调整问题
【发布时间】：2015-11-28 06:50:03
【问题描述】：

  /* 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 或任何其他手机上查看时，图像无法正确缩放并被部分截断。任何人都可以帮忙吗？谢谢。

【问题讨论】：

这个POST 可以帮助您区分移动页面和网页。因此，您可以更改您的 background-position 属性

标签： css html

【解决方案1】：

有两种方法可以在后台工作并使其正常工作：您应该删除发病：

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

和

height: 300px;
width: 100%;

另一种支持长度或宽度的方法，添加如下代码：

background-size: 100% auto;

第二种制作任意尺寸后胶的方法，添加如下代码：

background-size: 100% 100%;

谢谢

【讨论】：

【解决方案2】：

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

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

它将覆盖您希望图像覆盖的标签上的所有html或body。

【讨论】：