resize image using css

Question

I am trying to resize image using css only.

It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.

I have created a fiddle as demo so that you can see what's going on.

<div class="resize_image">
    <img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>

Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/

Demo : http://jsfiddle.net/squidraj/sbnvwped/

Please add relevant information to the question. A fiddle is a nice and convenient extra but no replacement. — GolezTrol
– GolezTrol, Commented Sep 2, 2014 at 21:27
The solution is width: 100%; You can check your fiddle here working jsfiddle.net/sbnvwped/2 — Andreas P.
– Andreas P., Commented Sep 2, 2014 at 21:50

user4002277 · Accepted Answer · 2014-09-03 02:05:56Z

2

You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo

<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>

#resize{
  width:250px;
  height:250px;
}
#resize:hover {
width:500px;
height:500px;}

answered Sep 3, 2014 at 2:05

user4002277

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

Comments

worldofjr · Accepted Answer · 2014-09-02 21:38:38Z

2

The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.

.resize_image img {
    display: block;
    height: auto;
    max-height: 485px;
    max-width: 1440px;
    width: 100%;
}

Hope this helps.

edited Sep 2, 2014 at 21:38

answered Sep 2, 2014 at 21:33

worldofjr

3,8968 gold badges41 silver badges53 bronze badges

1 Comment

Raj Over a year ago

Thanks a lot for the explanation. I will do a thorough test.

Raghav Garg · Accepted Answer · 2014-09-02 21:29:07Z

-1

Try this:

img.resize{
    width:540px; /* you can use % */
    height: auto;
}

answered Sep 2, 2014 at 21:29

Raghav Garg

11

2 Comments

LcSalazar Over a year ago

First... Always inclue some explaining to the answer, not pure code... Second, he MUST use %. Question stated that width should be 100% throughout the browser

Timothy Over a year ago

Don't just post code as a answer with 2 words above it

Collectives™ on Stack Overflow

resize image using css

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related