网页设计中的广泛图像

我正在编写一个网站，并试图找到像www.airbnb.com这样的东西：我的意思是一个静态的栏位（这部分是确定的）和一个大图像，下面是一个大的中心按钮。网页设计中的广泛图像

我该如何设法让这个大图像在每个屏幕分辨率上正常显示：目前，在1920×1080px的时候，我的图像与大按钮为中心完美匹配。但是，如果我改变我的决议，图像将被裁剪或调整大小...

你知道我该怎么做（CSS或JavaScript）？

非常感谢！

2012-08-23 Alex Grs

'img {width：100％; }'会大幅度缩放您的图片到任何容器中 –

你可以使用CSS媒体查询加载因分辨率不同的物理尺寸图像例如

你原来的桌面背景：

body { 
    background:url(images/bg1.jpg) no-repeat 0 0; 
}

对于具有800像素一个最大分辨率屏幕：

@media (max-width: 800px) { 

    body { 
     background:url(images/bg2.jpg) no-repeat 0 0; 
    } 

}

对于具有480像素一个最大分辨率屏幕：

@media (max-width: 480px) { 

    body { 
     background:url(images/bg3.jpg) no-repeat 0 0; 
    } 

}

的决议你的选择显然取决于你自己，以上仅作为例子给出。

2012-08-23 09:28:29

我试过了，它正在工作。它是否与所有导航器兼容？ –

@AlexGrs - 你的意思是浏览器？如果是的话，它与大多数浏览器兼容。请参阅此链接：http://caniuse.com/css-mediaqueries –

是的，我想说“浏览器”对不起:-)！ –

如果您使用的是<img>，那么请将width和height属性设置为它。

如果您正在使用的图像作为背景，以现有的元素，设置背景正确styles：

div{ 
    background:url(img_flwr.gif); 
    background-size:80px 60px; 
    background-repeat:no-repeat; 
}

2012-08-23 09:06:51 badunk

需要注意的是，上述解决方案依赖于CSS3 background-size属性，该属性不适用于较旧的非CSS3兼容浏览器。 –

回答