Question

现在我在一个寻呼机网站上工作。该网站似乎还可以，但我们仍有事可做。但我的主要问题是在ipad上扩展。如果您尝试在ipad http://www.4-sport.co/sis上打开网站，您会发现背景img缩放错误。它变小并位于左上角。我该怎么做才能纠正它？

谢谢

/* ==========================================================================
   Header Styles
   ========================================================================== */
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
   img { max-width: 100%; }
}

#header{overflow:hidden;height:auto;background: url('../img/bg.png') fixed no-repeat; height:100%;}
.no-touch #header{-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment: fixed;}

#logo{display:none;}
#logo img{width:100px;}

/* Intro Styles */

#intro{text-align: center;}  
#intro h1{margin-top: 0.5em;margin-bottom: 0;color: white;font-size: 1.875em;opacity:0;padding-top: 2em;}
#intro h2{margin-bottom: 0;font-size: 1.5em;opacity:0;padding-top: 2em;}
#intro p{color:white;}

#explore {opacity:0;margin-top: 0em;}
#explore a {text-decoration: none;}
#explore a i{font-size:6em;margin:0 auto; color:white; cursor:pointer; color:white;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.touch #explore a i:hover,.no-touch #explore a i:hover{color:#f4594e;}

Answer 1

对于无触摸设备，你有CSS：

.no-touch #header {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

这负责图像的正确缩放。您也需要这个用于触摸设备（iPad等）。因此，只需将CSS属性设置为#header并删除.no-touch #header { ... }

即可

ipad图像缩放css错误

1 个答案: