CODEWITHSUNDEEP
htmlcssimage
Startec
Startec

Reputation: 13206

How to Scale Down a Large Image Using HTML and/or CSS

What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:

Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?

Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks

Upvotes: 4

Views: 42476

Answers (4)

Mathew Crogan
Mathew Crogan

Reputation: 113

Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website. 

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-position:20% 20%; 
background-size:600px 800px;">

    </div>

Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-size:100% 100%;">

    </div>

Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.

Upvotes: 2

Philip Allgaier
Philip Allgaier

Reputation: 3669

With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.

So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.

Regarding image cropping: There is some trickery you can use as outlined in this SO answer.

JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)

JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)

Upvotes: 5

Brandon Kiefer
Brandon Kiefer

Reputation: 349

You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.

HTML

<img src="img.png" class="resize">

CSS

.resize {
    width:100px;
    height:100px;
}

.resize:hover {
    height:900px;
    width:900px;
}

Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.

Upvotes: 2

andrew
andrew

Reputation: 9583

well you can set the image as a background of a div and then set the background-size property

 #yourDiv{
   width:100 px;
   height:100 px;
   background:url('path/to/your/image');
   background-size: 100px 100px;
  }

you could set different properties for :hover but you'd need to use javascript to change the properties onclick

Upvotes: 1

Related Questions