1

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/

4
  • It should be width: 100% instead of width: auto Commented Sep 2, 2014 at 21:26
  • Like this? Commented Sep 2, 2014 at 21:26
  • Please add relevant information to the question. A fiddle is a nice and convenient extra but no replacement. Commented Sep 2, 2014 at 21:27
  • The solution is width: 100%; You can check your fiddle here working jsfiddle.net/sbnvwped/2 Commented Sep 2, 2014 at 21:50

3 Answers 3

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;}
Sign up to request clarification or add additional context in comments.

Comments

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.

1 Comment

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

Try this:

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

2 Comments

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
Don't just post code as a answer with 2 words above it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.