有什么办法来调整图像的大小基于屏幕分辨率与使用javascript？

问题描述

我计划在我的网站（976X450）使用大横幅图像。现在在更高分辨率的显示器，图像应该伸展占据空间。有什么办法做到这一点，使用不同的图像不同的分辨率？

I am planning to use a big banner image in my website(976X450).Now in higher resolution monitors the image should stretch to occupy the space. Is there any way to do this with out using different images for different resolution?

推荐答案

开始检测屏幕尺寸，然后继续：

Just start with the detection of screen dimensions and continue from there:

var width = screen.width;
var height = screen.height;

var img = document.getElementById(image_id);

img.height = img.height * width / img.width;
img.width = width;

更新：

使用CSS：

img#in_question { width: 100% }

这篇关于有什么办法来调整图像的大小基于屏幕分辨率与使用javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！