HTML img 缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1347675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML img scaling
提问by rwallace
I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?
我正在尝试显示一些带有 HTML img 标签的大图像。此刻他们离开了屏幕的边缘；如何缩放它们以留在浏览器窗口中？
Or in the likely event that this is not possible, is it possible to at least say "display this image at 50% of its normal width and height"?
或者在可能的情况下这是不可能的，是否至少可以说“以正常宽度和高度的 50% 显示此图像”？
The width and height attributes distort the image -- as far as I can tell, this is because they refer to whatever attributes the container may end up with, which will be unrelated to the image. I can't specify pixels because I have to deal with a large collection of images each with a different pixel size. Max-width doesn't work.
width 和 height 属性扭曲了图像——据我所知，这是因为它们指的是容器最终可能具有的任何属性，这些属性与图像无关。我无法指定像素，因为我必须处理大量具有不同像素大小的图像。最大宽度不起作用。
回答by RiddlerDev
Only set the widthor height, and it will scale the other automatically. And yes you can use a percentage.
只设置widthor height，它会自动缩放另一个。是的，您可以使用百分比。
The first part can be done, but requires JavaScript, so might not work for all users.
第一部分可以完成，但需要 JavaScript，因此可能不适用于所有用户。
回答by Selvadurai Handeeban
css is enough :
css就足够了：
width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
回答by Dimitri de Jesus
I know that this question has been asked for a long time but as of today one simple answer is:
我知道这个问题已经问了很长时间了，但截至今天，一个简单的答案是：
<img src="image.png" style="width: 55vw; min-width: 330px;" />
The use of vwin here tells that the width is relative to 55% of the width of the viewport.
这里使用vw表示宽度相对于视口宽度的 55%。
All the major browsers nowadays support this.
现在所有主要的浏览器都支持这一点。
Check this link.
检查此链接。
回答by unidentified-1
No Javascript required.
不需要Javascript。
IE6 Internet Explorer 6
IE6 浏览器 6
Percent only works for the width of an element, but height:100%;does not work without the correct code.
百分比仅适用于元素的宽度，但height:100%;如果没有正确的代码则不起作用。
CSS
CSS
html, body { height:100%; }
Then using a percentage works properly, and dynamically updates on window resize.
然后使用百分比正常工作，并在窗口调整大小时动态更新。
<img src="image.jpg" style="height:80%;">
You do not need a width attribute, the width scales proportionately as the browser window size is changed.
您不需要宽度属性，宽度会随着浏览器窗口大小的变化而按比例缩放。
And this little gem, is in case the image is scaled up, it will not look (overly) blocky (it interpolates).
这个小宝石，如果图像被放大，它不会看起来（过度）块状（它插入）。
img { -ms-interpolation-mode: bicubic; }
Props go to this source: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
道具转到此来源： Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
回答by Ralph David Abernathy
Adding max-width: 100%;to the imgtag works for me.
添加max-width: 100%;到img标签对我有用。
回答by riotera
I think the best solution is resize the images via script or locally and upload them again. Remember, you're forcing your viewers to download larger files than they need
我认为最好的解决方案是通过脚本或本地调整图像大小并再次上传。请记住，您是在强迫观众下载比他们需要的更大的文件
回答by Dorjan
The best way I know how to do this, is:
我知道如何做到这一点的最好方法是：
1) set overflow to scroll and that way the image would stay in but you can scroll to see it instead
1) 将溢出设置为滚动，这样图像就会保留下来，但您可以滚动查看它
2) upload a smaller image. Now there are plenty of programs out there when uploading (you'll need something like PHP or .net to do this btw) you can have it auto scale.
2）上传较小的图像。现在上传时有很多程序（你需要像 PHP 或 .net 这样的东西来做这个顺便说一句）你可以让它自动缩放。
3) Living with it and setting the width and height, this although will make it look distorted but the right size will still result in the user having to download the full-sized image.
3）使用它并设置宽度和高度，这虽然会使它看起来扭曲但正确的尺寸仍然会导致用户必须下载全尺寸图像。
Good luck!
祝你好运！
