Html 更改图像分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3500733/
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
change image resolution
提问by loll
I am trying to switch between different resolutions (original-standard-high) of an image using ONLY one image. Is this possible using any way? Here is an example of what I want, but it is using three image with three different resolutions, I want to use only one image. http://www.biomedcentral.com/1741-7007/8/59
我正在尝试仅使用一张图像在图像的不同分辨率（原始标准高）之间切换。这可以使用任何方式吗？这是我想要的一个例子，但它使用三个不同分辨率的三个图像，我只想使用一个图像。http://www.biomedcentral.com/1741-7007/8/59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>resize image </title>
<style>
.high{width:500px; image-resolution:300dpi; }
</style>
</head>
<body>
<img class="high" src="original.jpg" border="0" /><!-- the orginal image width =100 px-->
</body>
</html>
回答by deceze
You can simply manipulate the display sizeof the image using the widthand heightCSS or HTML attributes. This won't change the actual resolution of the image, it will just display it smaller or larger. This is not usually beneficial since the large image will always be downloaded and possibly waste a lot of bandwidth and slow down the browser (unless you're certain it will be viewed anyway, then it can be beneficial).
您可以使用和CSS 或 HTML 属性简单地操作图像的显示大小。这不会改变图像的实际分辨率，它只会显示更小或更大。这通常不是有益的，因为总是会下载大图像，并且可能会浪费大量带宽并减慢浏览器的速度（除非您确定无论如何都会查看它，否则它可能是有益的）。widthheight
If you simply don't want to create a bunch of small and large versions of the same file, look into resizing the images on-the-fly using a server-side language.
如果您只是不想为同一文件创建一堆大小版本，请考虑使用服务器端语言即时调整图像大小。
回答by Skilldrick
You can do that in HTML/CSS by setting the image size. Beware though, that some browsers do scaling better than others (for example, earlier versions of IE do no anti-aliasing, which makes scaled images look jagged).
您可以通过设置图像大小在 HTML/CSS 中做到这一点。但请注意，某些浏览器的缩放效果比其他浏览器更好（例如，早期版本的 IE 没有抗锯齿功能，这会使缩放后的图像看起来锯齿状）。
Also, do you really want your users to download all the images on your page at maximum res before they can see the thumbnails? This is a big waste of bandwidth if they'll generally only need to look at a few images at full size.
此外，您真的希望您的用户在看到缩略图之前以最大分辨率下载您页面上的所有图像吗？如果他们通常只需要以全尺寸查看几张图像，那么这是对带宽的巨大浪费。
