CSS/HTML分辨率的寬度

我必須將PSD文件剪切爲CSS和HTML。問題是背景圖像寬度爲1160px的容器。這個容器在右側只有背景圖片，所以我可以在較小的分辨率下隱藏。主要內容容器有996px，所以很好。CSS/HTML分辨率的寬度

我試圖做這種方式：

如果resultion比1160xXXX更顯示在右側的整幅圖像，
如果分辨率小於1160xXXX隱藏的智能部分圖像在右側。

在右側的圖像必須始終在同一個地方 - 它相對於.container .inner一起看起來不錯。

我的代碼：

.container { 
    max-width:1920px; 
    margin:0 auto; 
    position:relative; 
} 
.container .background { 
    background:black url("../img/woman.png") no-repeat scroll right top; 
    max-width:1160px; 
    overflow:hidden; 
} 
.container .inner { 
    width:996px; 
}

的目標是把背景圖像總是在同一個地方和削減這一形象，如果分辨率小於1160px。任何建議？

編輯：

對於沒有.container裝置技術領域改變它的位置取決於分辨率......我不希望它 - 圖像必須始終在同一個地方。

來源

2013-07-02 webrama.pl

你能解釋一下到底什麼情況正在發生，因爲你的CSS應該做的伎倆（雖然我覺得滾動不需要） – Martijn

你應該使用[媒體查詢]（http://css-tricks.com/css-media-queries/） –

使用媒體查詢像

@media only screen and (max-width:1160px){ 
    #something{ 
    some css 
    } 
}

您可以閱讀更多有關媒體查詢Here

來源

2013-07-02 17:30:42 GuiGreg

哇，我剛剛添加給DOK的回答，^這正是你需要的:) –

移動和平板電腦瀏覽器經常使用的一種新方法是使用不同尺寸的圖像對。例如，在響應式設計中，您可以使用CSS @media來檢查設備窗口寬度，並根據情況返回更大或更小的圖像。

來源

2013-07-02 17:29:28 DOK

是爲了使DOK的答案更加完整，谷歌CSS媒體查詢 –

CSS/HTML分辨率的寬度

回答

相關問題