HTML img缩放

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

或在可能的情况下，这是不可能的，至less可以说“以正常的宽度和高度的50％显示这个图像”？

宽度和高度属性会扭曲图像 – 据我所知，这是因为它们指的是容器可能以何种属性结束，这与图像无关。 我不能指定像素，因为我必须处理每个像素大小不同的大量图像。 最大宽度不起作用。

Answer 1

只设置width或height ，并自动缩放另一个。 是的，你可以使用一个百分比。

第一部分可以完成，但需要JavaScript，所以可能不适用于所有用户。

Answer 2

看着img标签的W3学校参考 ，你应该能够做到这样的事情：

 <img src="img.jpg" width="50%" height="50%"/> 

要通过Javascript自动缩放， 请查看此提示

Answer 3

添加max-width: 100%; 到img标签为我工作。

Answer 4

没有Javascript要求。

IE6 Internet Explorer 6

百分比只适用于元素的宽度，但height:100%; 没有正确的代码不起作用。

CSS

 html, body { height:100%; } 

然后使用百分比正常工作，并dynamic更新窗口大小。

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

您不需要宽度属性，宽度将随着浏览器窗口大小的变化而成比例地缩放。

而这个小gem，如果图像放大，它不会看（过度）块（它插值）。

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

道具去这个来源： 终极IE6 Cheatsheet：如何修复25 + Internet Explorer 6的错误

Answer 5

CSS足够了：

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

Answer 6

我认为最好的解决scheme是通过脚本或本地调整图像大小，然后再次上传。 记住，你迫使你的观众下载比他们需要的更大的文件

Answer 7

我知道如何做到这一点的最好方法是：

1）设置溢出滚动，这样图像将保持在，但你可以滚动看到它

2）上传一个较小的图像。 现在有很多程序在上传时（你需要像PHP或.net这样的顺便说一句），你可以自动扩展。

3）与它一起生活，并设置宽度和高度，虽然这将使它看起来扭曲，但正确的大小仍然会导致用户不得不下载全尺寸的图像。

祝你好运！