CODEWITHSUNDEEP
html
loll
loll

Reputation: 237

change image resolution

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

<!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>

Upvotes: 2

Views: 50185

Answers (2)

deceze
deceze

Reputation: 522470

You can simply manipulate the display size of the image using the width and height CSS 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).

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.

Upvotes: 5

Skilldrick
Skilldrick

Reputation: 70869

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).

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.

Upvotes: 2

Related Questions