我知道类似的问题曾经被问过好几次,但是我已经仔细研究了很多问题/答案,找不到适合我的具体问题的解决方案。
基本上我有一个响应的网站,它有固定的背景图片-图片是1280 x 853像素,它们通过下面的css应用到html标签(这是目前有点混乱,因为尝试了几种解决方案)-

html {
  background: url(/content/images/bg_lrg.jpg) no-repeat top center fixed;
  -webkit-background-size: 1024px 768px;
  background-attachment: fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我的想法是应用一个背景大小-如果这有效的话,我会使用媒体查询来应用ipad/iphone/other的相关大小。
目前,iOS设备中的图像看起来很大——因为它将自己限制在文档的高度,而不是视区的高度——我知道在移动iOS中有很多固定背景的问题——有人有解决方案吗?在哪里我的图像可以被压缩到视窗宽度而不是文档高度?

最佳答案

第一个解决方案,你试过设置你的视窗吗?在HTML的头部,您可以包括以下内容:

<meta name="viewport" content="width=device-width, initial-scale=1">

我会先试试。你甚至可以指定iphone的宽度。为了让您的设备在手机上正确显示图像大小,这是最好的解决方案。下面是一个链接,其中快速描述了如何使用视口:
许多站点将其视窗设置为“width=320,initial scale=1”,以便在纵向模式下精确地适应iPhone的显示。Using the viewport meta tag to control layout on mobile browsers
二次解决方案:
如果这不起作用,我在这些新特性出现之前创建了一个修改过的自定义解决方案。我修改了此函数,使网站的背景始终填充背景,而不管屏幕大小:
使用JQuery的JavaScript:
//Resize background image function
$(function () {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

setInterval(function () {
    //Checks for screen resize every hundreth of a second and resizes elements based on that new screen size
    if ((width != $window.width()) || (height != $window.height())) {
        //resets the variables to prevent glitching
        width = $window.width();
        height = $window.height();

        //calls resizing functions
        resizeBg();
    }
}, 100);
});

它调用这个函数:
function resizeBg() {
var theWindow = $(window),
$bg = $("#bgVideo"),
aspectRatio = 1920 / 1080; //-- This is the aspect ratio (width / height) of the background image. if the video changes size.

//actually apply aspect ratio
if ((theWindow.width() / theWindow.height()) < aspectRatio) {
    $bg.removeClass().addClass('bgheight');
} else {
    $bg.removeClass().addClass('bgwidth');
}
}

在我的CSS中,我有以下类:
.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

在你的HTML上,你想要这样的东西:
 <video id="bgVideo".....

或者
<img id="bgVideo"...

我的背景ID有以下CSS:
#bgVideo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

我希望这能有帮助。

09-10 10:42
查看更多