基于分辨率的自动背景图像调整大小

这是一个问题：我想要一个CSS代码，允许我自动调整我的网站的背景，仅基于所使用的电脑的分辨率。基于分辨率的自动背景图像调整大小

这意味着，例如，如果用户调整浏览器窗口的大小（不像.stretch值，要清楚），图像将不会调整大小。

2014-01-14 user3194444

我不认为你可以做到没有javacript，但你可以计算'window.screen.width'和'window.screen.height' –

你甚至不能用javascript。我们在浏览器窗口领域工作，而不是系统规范。 – QuestionMarks

@JacquesGoulet呃，是的，你可以吗？ http://stackoverflow.com/questions/10022584/can-you-get-a-users-screen-size-resolution-using-javascript – brandonscript

这会给你一个负责任的背景，只有CSS：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

这将仅适用于CSS一个负责任的形象。如果您想要按照屏幕大小更改图像，请将该声明放入媒体查询中。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
}

欲了解更多信息，你可以查看这个问答&答：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
}

：

Responsive backgrounds with Twitter Bootstrap?

如果你不想响应图像，刚刚从html选择删除CSS3声明

来源

2014-01-14 19:30:00 robabby

这可能会有帮助全...

background-size：包含; background-origin：content-box;

这将帮助您将图像保留为原始尺寸的正常屏幕尺寸，并根据更改的尺寸调整尺寸。但我们必须保持自动化的高度。否则它的高度会影响背景图像的大小。

来源

2014-03-03 07:12:31 user3373888

基于分辨率的自动背景图像调整大小

回答

相关问题