如何使图像显示与用户屏幕的大小相关？

Question

我的图像高度为480像素。在我的Macbook上它看起来还不错但是当我去我的30英寸显示器时，显然底部有一个巨大的空间。

我该怎么做才能确保480px总是与用户屏幕的大小有关？

我做了一些搜索，似乎使用背景图片：封面或背景位置我可以做一些事情，但很可能它不是我想要的。我该怎么做才能解决这个问题？

Answer 1

实现此目的的一种方法是将图像放在可以随页面缩放的容器中。

高度是一个难以扩展的属性，但只要所有父元素都具有指定的高度，您就可以实现它。 您可以使用CSS代码，例如

height:40%;

缩放元素。

在此处缩放页面的高度以便自己查看：http://jsfiddle.net/L7uWd/

Answer 2

尝试使用宽度百分比来根据浏览器宽度设置图像大小。在根据窗口重新调整大小重新调整元素大小时，最好以百分比（而不是像素）设置宽度。

设置image height to some percentage instead of pixel，它将自动处理屏幕大小。