css - 如何使我的图像相对于用户屏幕的大小显示？

Question

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

我该怎么做才能确保 480px 始终与用户屏幕的大小相关？

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

Answer 1

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

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

height:40%;

缩放元素。

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

Answer 2

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

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