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 g

Answer 1

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;}

Answer 2

Try this:

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

Answer 3

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.