HTML CSS - Image Resizing

Question

If I have an image - say 20*20 pixels

I can use this line to resize the image - it will make the entire image smaller:

 <img src="images/online-dating-main/blinking smile14x14.gif" width="14" height="14"/>

How can I do this resizing with CSS?

I have tried this but it just crops the image:

 <div id="smile"></div>

  div#smile {
     background: url(../images/online-dating-main/smile.gif) no-repeat 0 0;
     width: 14px;
     height: 14px;
 }

How can I do resizing with CSS?

thx

I never rely on the browser to do image re-sizing... depending on the browser it tends to look blurry or jagged. If the image is much larger than your desired size, the full-size image must still download even though you're displaying it smaller. I prefer to do image resizing in Photoshop and just display the full image at 100% scale in the browser. — Sparky
– Sparky, Commented Oct 5, 2011 at 3:06
it looks like you're using two separate images, which would explain the cropping. you don't need background clip or background size for that one. your css is correct. your image uri's don't match. — albert
– albert, Commented Oct 5, 2011 at 4:14
I used imageresize.php with two parameters width and height, you can upload one image and get multiple size dynamically, I also made a cache for repeated image sizes. (The file imagesize.php) is PHP script which can be used for image re-sizing) — user1646111
– user1646111, Commented Jan 28, 2013 at 10:54

alex · Accepted Answer · 2013-01-28 10:46:30Z

6

Add background-size: contain; to the div#smile selector.

jsFiddle.

Note that browser support may be an issue. IE < 9 does not support this property.

edited Jan 28, 2013 at 10:46

answered Oct 5, 2011 at 2:58

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jdi Over a year ago

Or couldn't he just apply the side attributes directly to the img tag instead of using a background image?

alex Over a year ago

@jdi: The OP could too. But I figured they wanted to do it with a background-image.

jdi Over a year ago

Yea I just assumed that was one way he was trying to accomplish it. Multiple ways to skin this cat! :-)

jdi · Accepted Answer · 2011-10-05 03:01:49Z

0

Resizing the img instead of using a background image?

 <img class="resize" src="images/online-dating-main/blinking smile14x14.gif" />

CSS

.resize {
    width: 14x;
    heigh: 14px;
}

answered Oct 5, 2011 at 3:01

jdi

93k20 gold badges174 silver badges208 bronze badges

Collectives™ on Stack Overflow

HTML CSS - Image Resizing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related