Question

我正在尝试仅使用一个图像在图像的不同分辨率（原始 - 标准 - 高）之间切换。这有可能以任何方式使用吗？这是我想要的一个例子，但它使用三个不同分辨率的三个图像，我想只使用一个图像。 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>

Answer 1

您可以通过设置图像大小在HTML / CSS中执行此操作。但请注意，某些浏览器的扩展效果比其他浏览器更好（例如，早期版本的IE不会出现抗锯齿现象，这会使缩放后的图像显得锯齿状。）

此外，您真的希望您的用户能够以最大分辨率下载页面上的所有图像，然后才能看到缩略图吗？如果他们通常只需要查看完整尺寸的一些图像，这对带宽来说是一个很大的浪费。

Answer 2

您可以使用width和height CSS或HTML属性简单地操作图像的显示大小。这不会改变图像的实际分辨率，只会显示更小或更大。这通常不是有益的，因为大图像将永远被下载并且可能浪费大量带宽并使浏览器变慢（除非您确定无论如何都会查看它，然后它可能是有益的。）

如果您只是不想创建同一文件的大量小型和大型版本，请尝试使用服务器端语言即时调整图像大小。

改变图像分辨率

2 个答案: