0

我们提供了一个 1500 像素宽的图像，它是一个网站的模型。

网站设计是固定宽度设计，设计占据图片中间990px​​。因此，图像两侧的 255 像素只是突出显示站点将如何扩展到更大的视口（即，除了一些边缘元素扩展到无限大之外，它不会除外）。

我想做的是用图像模拟这个（尽可能地）。因此，如果视口为 1500 像素，则图像将从 0,0 开始。

如果视口为 990 像素或更小，则图像将从 0,255 像素开始。

介于两者之间的任何东西都会扩展。所以我想根据视口的宽度将负边距从 -255 缩放到 0。

有点像相反的

margin: 0 -10% 0 0;

这与我的想法相反 - 随着视口变宽，图像向左移动而不是向右移动。

4

1 回答 1

0

在您的样式表中，您可以尝试使用一些响应式设计技术，...

@media screen and (max-width:1500px){
    #yourContainer{margin-left:0;background-color:#afa;}

}

@media screen and (max-width:990px){
    #yourContainer{margin-left:255px;background-color:#aaf;}

}

添加背景颜色仅用于测试；）这个 jsFiddle 演示了这一点，只需调整浏览器窗口的大小或小提琴列的宽度 - http://jsfiddle.net/vs6uz/1/

于 2013-02-20T06:49:22.127 回答