CSS 根据屏幕分辨率设置图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2330889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set image size with respect to the screen resolution
提问by Raj
I am trying to build a website for myself.. I want to use an image as the header... I have made sure that my background will scale itself for any screen resolution... How do i make sure the image(header) will also scale it self according to the screen resolution...
我正在尝试为自己建立一个网站..我想使用图像作为标题...我已经确保我的背景可以根据任何屏幕分辨率自行缩放...我如何确保图像（标题）还将根据屏幕分辨率自行缩放...
for example: my image is 350px int width and 130px in height.. i want this to be the size when screen resolution is 1280X768.. and should change proportionally based on screen size..
例如：我的图像宽度为 350 像素，高度为 130 像素.. 我希望这是屏幕分辨率为 1280X768 时的尺寸.. 并且应该根据屏幕尺寸按比例变化..
Please tell me how to do this preferably using CSS.. i am also fine with js or jquery
请告诉我如何最好使用 CSS.. 我也可以使用 js 或 jquery
Thanks in advance Raj
预先感谢拉吉
回答by jeroen
If you only specify the width in css, the height will scale automatically. You can easily specify the with of the image relative to its parent.
如果仅在 css 中指定宽度，则高度将自动缩放。您可以轻松指定图像相对于其父级的 with 。
In your example you would have to specify width: 27%(1280 / 350). Note that the parent will have to be 100% wide.
在您的示例中，您必须指定width: 27%(1280 / 350)。请注意，父级必须为 100% 宽。
回答by Michael Pilat
You can get the screen size from the DOM using screen.widthand screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/widthattributes on the image (which would scale it, but doesn't always look great).
您可以使用screen.width和从 DOM 获取屏幕大小screen.height。然后你可以编写一些 JS 来加载或替换所需的图像或调整图像上的height/width属性（这会缩放它，但并不总是很好看）。
回答by Kevin
There is a good article on fluid grids by Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids/
Ethan Marcotte 有一篇关于流体网格的好文章，http://www.alistapart.com/articles/fluidgrids/
You can apply these principals to your images using CSS, he does on his personal site. There even good apps to help you out.
您可以使用 CSS 将这些原则应用于您的图像，他在他的个人网站上就是这样做的。甚至有很好的应用程序可以帮助您。
this one has a read me -> web duck http://inteldesigner.com/web-duck/about.php
这个有一个自述 -> 网络鸭 http://inteldesigner.com/web-duck/about.php
this one has more features -> em calc http://riddle.pl/emcalc/
这个有更多功能-> em calc http://riddle.pl/emcalc/
