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分辨率的宽度

回答

相关问题