响应式设计 - 位置固定和全屏图像答案

【问题标题】：responsive design- position fixed and fullscreen image响应式设计 - 位置固定和全屏图像
【发布时间】：2013-11-26 14:27:17
【问题描述】：

我为客户制作的响应式设计有点问题。我有一个位置固定的背景 div，其中包含一个 img。在纵向可视化的智能手机上，我将 img 的 height 设置为 100%，将 width 设置为 auto。这样图像就覆盖了窗口的整个高度，并且不会扭曲他的宽度。

问题是在 ios 智能手机和网络上工作（我已经在 ipadpeek.com 和 Riplle for chrome 等模拟器上尝试过），但在我的 Galaxy 3 上，图像仍然覆盖了窗口的整个高度，但它扭曲了它水平：

HTML：

<div id="bg_container">
    <img src="images/home-1.jpg" />
</div>

CSS：

@media only screen and (min-width : 321px) and (max-width : 360px) {
    #bg_container {
        position:fixed;
        width:100%;
        height:100%;
        z-index:0;
        overflow:hidden;
    }
    #bg_container img {
        height:100%;
        width:auto;
        position:relative;
    }
}

Link test page

【问题讨论】：

您不应该相信像 ipadpeek.com 这样的网站会向您展示实际的 ipad 会呈现您的网站的样子。他们所做的只是以 ipad 屏幕的大小向您展示您的网站。它仍在使用您正在使用的任何浏览器的渲染引擎来实际渲染页面。
我知道，但问题出在物理 Galaxy3 上，我已经在 iphone 4 和 3 以及 ipad3 和 2 上进行了测试...在 ios 上，宽度：自动运行正确并且不要t 扭曲图像，在银河系没有...
我找到了一个可以解决问题的jquery，但我认为这不是必须正确的方法...我认为可以是纯Css方式：
var $scrollingDiv = $("#bg-nivo-slider"); $(window).scroll(function(){ $scrollingDiv .stop() .animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 0); });
它有效，但我认为这不是最好的方法，尤其是对于移动设备，因为他必须计算页面的每一个小滚动时的 margin-top ......我认为它可以响亮而缓慢。你怎么看？

标签： jquery css responsive-design

【解决方案1】：

尝试将您的宽度设置为最大宽度：这是一个新的神奇属性！

另外，为了测试您的设计，Google Chrome 响应式移动视图，因为我相信这使用了正确的引擎来显示您的工作

【讨论】：

Google Chrome 响应式移动视图？是波纹扩展吗？如果是的话，我已经用它进行了测试，但在电脑上可以在 Galaxy 手机上工作，没有......

【解决方案2】：

我已经通过更改移动设备上的滑块解决了，也因为 nivo 滑块太大声，移动设备的雨挡过渡... 我也尝试了最大宽度，但没有任何改变......

【讨论】：