HTML img缩放

Question

我正在尝试使用HTML img标签显示一些大图像.此刻他们离开了屏幕的边缘; 如何缩放它们以保持在浏览器窗口内？

或者在可能发生这种情况的情况下,是否有可能至少说"以正常宽度和高度的50%显示此图像"？

宽度和高度属性会扭曲图像 - 据我所知,这是因为它们指的是容器最终可能出现的任何属性,这与图像无关.我无法指定像素,因为我必须处理每个具有不同像素大小的大量图像.最大宽度不起作用.

Answer 1

只设置width或height,它将自动缩放另一个.是的,你可以使用一个百分比.

第一部分可以完成,但需要JavaScript,因此可能不适用于所有用户.

Answer 2

我知道这个问题已经问了很长时间了，但截至今天，一个简单的答案是：

<img src="image.png" style="width: 55vw; min-width: 330px;" />

这里使用vw表示宽度相对于视口宽度的 55%。

现在所有主要的浏览器都支持这一点。

检查此链接。

Answer 3

css就足够了:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

Answer 4

不需要Javascript.

IE6 Internet Explorer 6

百分比仅适用于元素的宽度,但height:100%;如果没有正确的代码,则无效.

CSS

html, body { height:100%; } 

然后使用百分比正常工作,并在窗口调整大小时动态更新.

<img src="image.jpg" style="height:80%;">

您不需要width属性,宽度按比例缩放,因为浏览器窗口大小已更改.

而这个小宝石,万一图像按比例放大,它不会看起来(过度)块状(它插入).

img { -ms-interpolation-mode: bicubic; }

道具来源: Ultimate IE6 Cheatsheet:如何修复25+ Internet Explorer 6错误

Answer 5

添加max-width: 100%;到img标签对我有用.