图像引起的水平滚动

一切是在PC或MAC细。问题是如果你在移动设备上看它，你会发现3个图像导致了一个水平滚动条。

我使用它来设定视口移动装置考虑：

<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">

我使用精灵方法来设置的div背景，用于示出3个图像。

HTML：

<div class="demopic" id="category"></div>

CSS：

.demopic { 
     text-align: center; 
     margin: 10px auto; 
     background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png); 
    } 

#category { 
     width: 560px; 
     height: 590px; 
    }

我的问题是，根据我的情况，有没有快速解决，实现了响应的形象？我不想在移动设备上显示水平滚动条。

如果我在<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">中删除initial-scale=1.0，图像将被压缩为适当的大小，但同时字体大小也将被调整大小。

任何人给我一些灵感将不胜感激！

来源

2015-03-31 Vigor

我认为你最好打赌是使用标准的img标签，并确保图像永远不会展开比它的父容器更广泛（可能只是身体元素）。

.my-image { 
    max-width:100%; 
    height:auto; 
}

这应该可以做到。

但是，如果你真的想使用div/background图像方法，事情会稍微复杂一些。

.my-background-image { 
    width:100%; 
    height:0; 
    padding-bottom:50%; 
    background:url(img.png) no-repeat center center; 
    background-size:100% auto; 
}

这里我们设置一个元素来填充它的父宽度。然后我们使用padding-bottom使其高度与其宽度成比例（您需要调整它）。最后，我们使背景大小始终填充元素。值得注意的是背景大小在IE8中不起作用。

来源

2015-03-31 15:32:28

图像引起的水平滚动

回答

相关问题