根据屏幕分辨率设置图像大小答案

【问题标题】：set image size with respect to the screen resolution根据屏幕分辨率设置图像大小
【发布时间】：2010-02-25 01:09:44
【问题描述】：

我正在尝试为自己建立一个网站..我想使用图像作为标题...我已确保我的背景会根据任何屏幕分辨率自行缩放...我如何确保图像(header) 也会根据屏幕分辨率自行缩放...

例如：我的图像宽度为 350px，高度为 130px。我希望这是屏幕分辨率为 1280X768 时的尺寸。并且应该根据屏幕尺寸按比例变化。

请告诉我如何最好使用 CSS.. 我对 js 或 jquery 也很好

提前致谢拉杰

【问题讨论】：

【解决方案1】：

如果只在css中指定宽度，高度会自动缩放。您可以轻松地指定图像的 相对于其父级。

在您的示例中，您必须指定 width: 27% (1280 / 350)。请注意，父级必须是 100% 宽。

【讨论】：

【解决方案2】：

您可以使用 screen.width 和 screen.height 从 DOM 获取屏幕大小。然后您可以编写一些 JS 来加载或替换为所需的图像或调整图像上的height/width 属性（这会缩放它，但并不总是很好看）。

【讨论】：

这怎么可能？我有同样的问题，我不会去任何我尝试过所有东西的地方，没有任何东西可以适合屏幕上的图像。我用 JS 获得了分辨率，但是如何将值放在 css 宽度和高度属性中？

【解决方案3】：

Ethan Marcotte 有一篇关于流体网格的好文章，http://www.alistapart.com/articles/fluidgrids/

您可以使用 CSS 将这些原则应用于您的图像，他在他的个人网站上就是这样做的。甚至还有很好的应用程序可以帮助您。

这个有更多的功能 -> em calc http://riddle.pl/emcalc/

【讨论】：