2010-08-17 202 views
0

我试图在仅使用一个图像的图像的不同分辨率(原始标准高)之间切换。这可能以任何方式使用? 这是我想要的一个例子,但它使用三种不同分辨率的图像,我只想使用一个图像。 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> 

回答

2

使用widthheight CSS或HTML属性,您可以简单地操作图像的显示大小。这不会改变图像的实际分辨率,只会显示更小或更大的分辨率。这通常不是有利的,因为大图像总是被下载并且可能浪费大量带宽并且减慢浏览器的速度(除非你确定它将被无论如何看待,然后它可能是有益的)。

如果您不想创建一堆相同文件的小型和大型版本,请使用服务器端语言即时调整图像大小。

+0

我试图使用** HTML5 **中引入的**图像分辨率** ** CSS **属性来修复伸展问题,但不幸的是,它在任何浏览器上都不起作用 – loll 2010-08-17 09:26:05

+0

@loll图像通常只有*一个*分辨率。此外,请勿将* resolution *(dpi)与* dimensions *(宽度,高度)混淆。你想要达到什么目的?我无法从你的链接例子中获得任何东西。 – deceze 2010-08-17 09:41:15

+0

好吧,我想改变图像分辨率(dpi),使用任何方式javascript,css,java或任何其他技术 – loll 2010-08-17 09:49:35

2

您可以通过设置图像大小来在HTML/CSS中执行此操作。但要小心,有些浏览器的缩放比其他浏览器更好(例如,IE的早期版本不会进行反锯齿,这会使缩放的图像显得锯齿状)。

此外,您是否真的希望您的用户在能够看到缩略图之前以最大的分辨率下载网页上的所有图像?如果他们通常只需要以全尺寸查看几张图像,那么这会带宽的巨大浪费。

+0

好吧,我试图完全通过HTML/CSS来做到这一点,但高分辨率的图像看起来像拉伸,我想要一种方式来保持我的形象在一个很好的视野,你明白了吗? – loll 2010-08-17 09:09:22

+0

您需要使高分辨率图像尺寸合适,然后缩小中等和小尺寸图像。 – Skilldrick 2010-08-17 09:15:28

+0

是的,你是对的,但实际上我有我已经存在的图像,小尺寸 – loll 2010-08-17 09:21:48