视差背景图像在移动视图中放大 [英] parallax background images zoomed in on mobile view

问题描述

我还是媒体查询的新手，所以我不确定在这里是否正确使用了100％的媒体查询.但是由于某些原因，家庭背景图像和联系人背景图像无法在我的iPhone的移动视图中正确显示.我搜索了许多变通方法，但仍然找不到任何可行的方法.我的网站链接是- http://fharrishomecare.com 任何帮助将不胜感激！同样，当我隐藏iframe地图时，它在平板电脑视图中仍会留出一块空白.任何帮助也将不胜感激！

I'm still pretty new to media queries so I'm not sure if i'm using them 100% correctly here. But for some reason, the home background image and the contact background image do not display properly in mobile view on my iPhone. I've searched many work arounds but still haven't found anything that works. My site link is - http://fharrishomecare.com Any help will be greatly appreciated! Also when I hide the iframe map, it still leaves a block of blank space in tablet view. Any help with that would be appreciated too!

#home {
  background: url('../images/colorful-bg.jpg') 50% 0 repeat-y fixed;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  text-align: center;
}

#contact {
  background: url('../images/contact-bg.jpg') 50% 0 repeat-y fixed;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

/* mobile responsive section styles
/* ========================================== */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  h1 {
    font-size: 53px;
  }
  #counter .counter-item {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
 iframe {
    display: none;
 }
 
}

@media (max-width: 650px) {
  h1 {
    font-size: 40px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
   iframe {
    display: none;
 }
}

@media (max-width: 450px) {
  h1 {
    font-size: 28px;
    line-height: 38px;
  }
  #home h5 {
    font-size: 11px;
  }
  #home .btn {
    display: inline-block;
    padding: 14px 32px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }  
   iframe {
    display: none;
 }
}

@media (max-width: 375px) {
  h1 {
    font-size: 24px;
    line-height: 34px;
  }
  #home h5 {
    font-size: 9px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
   iframe {
    display: none;
 }
}

推荐答案

您的背景图片似乎不是放大"的，实际上是未缩小"的.背景以实际尺寸显示在小于 1024px 的屏幕上.

It looks like your background images are not "zoomed-in" but, in effect, "not zoomed out". The backgrounds are displayed at their actual size on screens narrower than 1024px.

这是由您的 style.css 中的许多声明引起的，这些声明位于〜480 ，〜500 ，〜525和〜545 ，其中一堆媒体查询反复设置 #home ， #divider的 background-size 属性和 #contact 元素转换为 auto .

This is caused by quite a few declarations in your style.css at lines ~480, ~500, ~525 and ~545 where a bunch of media queries repeatedly set the background-size property of #home, #divider and #contact elements to auto.

如果希望背景图像尽可能小但仍覆盖元素，则应将这些元素的 background-size 属性设置为 cover .

You should set the background-size property of those elements to cover if you want the background images to be as small as possible but still cover the element.

另一方面，将 background-size 设置为 cover 会与您选择的视差方法发生冲突.每当您通过 background-size:cover 元素上的视差垂直移动 background-position 时，就会出现您描述的空白块".可以使用两种不同的方法解决此问题:

On the other hand, setting your background-size to cover would conflict with your chosen parallax method. Whenever you are vertically shifting the background-position via parallax on a background-size:cover element, the "block of white space" you describe appears. This could be fixed using two different methods:

1. 使用负边距+填充，以便背景放大足以使元素在屏幕上时不会出现白色方块"
2. 使用其他视差方法(可以将CSS转换应用于其的绝对位置的< img> 标签或伪元素).

1. Use of negative margins + paddings so the background is zoomed-in enough for the "white blocks" not to appear when the element is on screen
2. Use a different parallax method (absolutely positioned <img> tags or pseudo-elements that you could apply CSS transforms to).

请注意， style.css 当前具有大量的次优代码.而且您的标记还存在一些明显的不一致之处，例如，您的某些部分具有 parallax-section 类，而其他部分则具有无处可寻的 paralla-section 在您的 CSS 中.

Please note style.css currently has a considerable amount of sub-optimal code. And your markup also has a few notable inconsistencies like, for example, some of your sections feature the parallax-section class while others the paralla-section which is nowhere to be found in your CSS.

这篇关于视差背景图像在移动视图中放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！