1

我必须将 PSD 文件切割成 CSS 和 HTML。问题是带有背景图像的容器宽度为 1160 像素。这个容器在右侧只有背景图像，所以我可以在较小的分辨率下隐藏。主要内容容器有 996px 所以很好。

我正在尝试这样做：

  • 如果结果大于 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;
}

目标是将背景图像始终放在同一位置，如果分辨率小于 1160 像素，则剪切此图像。有什么建议吗？

编辑：

对于没有 .container .background 改变它的位置取决于分辨率......我不想要它 - 图像必须始终在同一个地方。

4

2 回答 2

2

使用媒体查询，例如

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

您可以在此处阅读有关媒体查询的更多信息

于 2013-07-02T17:30:42.740 回答
1

一种经常用于移动和平板电脑浏览器的新方法是使用不同大小的图像对。例如，在响应式设计中，您可以使用 CSS@media来检查设备窗口的宽度，并根据情况返回更大或更小的图像。

于 2013-07-02T17:29:28.153 回答