Question

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

问题在于ios智能手机和网络上的工作（我试过像ipadpeek.com和Riplle这样的仿真器用于镀铬），但是在我的银河系3上，图像仍然覆盖了窗口的整个高度但却扭曲了它horizontaly：

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

Answer 1

尝试将宽度设置为最大宽度：这是一个适用于Magic !!的新属性

此外，为了测试您的设计，Google Chrome响应式移动视图因为我认为它使用适当的引擎来显示您的作品

Answer 2

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

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

2 个答案: