Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/91.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
有没有办法根据屏幕分辨率调整图像大小而不使用javascript?_Javascript_Html_Css - Fatal编程技术网

有没有办法根据屏幕分辨率调整图像大小而不使用javascript?

有没有办法根据屏幕分辨率调整图像大小而不使用javascript?,javascript,html,css,Javascript,Html,Css,我计划在我的网站上使用一个大横幅图像(976X450)。现在在更高分辨率的显示器上,图像应该伸展以占据空间。有没有办法不使用不同分辨率的图像来实现这一点 从检测屏幕尺寸开始,然后继续: var width = screen.width; var height = screen.height; var img = document.getElementById(image_id); img.height = img.height * width / img.width; img.width =

我计划在我的网站上使用一个大横幅图像(976X450)。现在在更高分辨率的显示器上,图像应该伸展以占据空间。有没有办法不使用不同分辨率的图像来实现这一点

从检测屏幕尺寸开始,然后继续:

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% }

图像将拉伸,这将影响所有比例。您是要平铺图像(即沿x轴重复)还是用其他颜色(如背景色)填充空间?您可以将
width:100%
设置为图像上的CSS样式我无法想象976x450图像的加载速度有多慢。O.M.G.我不想平铺图像,我想用我认为没有javascript的图像填充空间?--只是确定一下+1获取更新的答案。不显示高度将保持OP计划的原始比例。
#HeaderImage {
   height: 20%;
   width: 100%;
   background-repeat:repeat-x;

}