圖像引起的水平滾動

一切是在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

圖像引起的水平滾動

回答

相關問題