CSS减少与视口宽度成比例的负边距

时间:2013-02-20 06:07:01

标签: css

我们提供了1500px宽的图像,这是一个网站的模型。

网站设计采用固定宽度设计,设计占据图像的中间990像素。因此,图像两侧的255px只是悬垂,以显示网站如何扩展到更大的视口(即,除了一些边缘元素扩展到无穷大之外,它不会。)

我想做的是用图像模拟这个(尽可能向上)。因此,如果视口为1500px,则图像将从0,0开始。

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

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

有点像

的反面
margin: 0 -10% 0 0;

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

1 个答案:

答案 0 :(得分: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/