使用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/

Answer 1

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.

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

Answer 3

Try this:

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