HTML - 在保留纵横比的同时显示尽可能大的图像

这是一个快速功能,可以将高度或宽度调整为100%,具体取决于哪个更大.在FF3,IE7和Chrome中测试过

你不一定要根据哪个更大的方向伸展.例如,我有一个宽屏显示器,所以即使它是一个比它更高的图像,从左到右拉伸它仍然可以剪掉顶部和底部边缘.

您需要计算窗口宽度和高度与图像宽度和高度之间的比率.较小的一个是你的控制轴 - 另一个是依赖的.即使两个轴都大于相应的窗口长度,也是如此.

也可以使用纯CSS使用背景图像和background-size:contain属性来执行此操作:

如果容器更改宽高比,则可以自动更新,而无需响应调整大小事件(此处编码的Javascript方法可能会导致在用户调整浏览器大小时切断图像).该方法具有相同的好处,但CSS更平滑,并且没有安全警告问题.

注意事项:

没有元素表示没有上下文菜单,也没有替代文本.

IE支持background-size:contain仅为9+,我甚至无法在IE9中使用它(原因不明).

好像所有的background-*属性有相同的CSS块作为背景图像进行指定,因此在同一页上多个图像将每个人都需要自己的contain,no-repeat和center.