2

I would like to have a CSS class and/or solution where the image is 100% width (with height being auto), but max its own size. Anyway to achieve that or do I need to specify max width image-by-image?

Tom
  • 3,587
  • 9
  • 69
  • 124

2 Answers2

2

If you set:

width: 100%;
height: auto;

The image will be as bigger as its container is. The ratio between width and height will be kept.

If the image's width is lower then container's width then it will be scaled till it fits the available space. In this case you may want to use:

max-width: 100%;
height: auto;
Krasimir
  • 13,306
  • 3
  • 40
  • 55
  • The **max-width** solution does not work for me. The image is not reszied downwards when window is resized. (And the **width** solution does not give desired effect as I don't want small images resized/scaled upwards) – Tom Aug 18 '13 at 14:32
  • 2
    Sorry, but I can't agree with you. Open the following fiddler http://jsfiddle.net/krasimir/VVNDX/1/ and shrink to the right the panels. You will see that the image is resized and it fills the available space. The second image is absolutely the same. The container there is with lower width then the image and *max-width: 100%* fix that problem too. In other words *max-width: 100%* tells to the browser that the maximum width of the image will be always equal to the container's width. – Krasimir Aug 18 '13 at 17:07
  • I got it working elsewhere on my website, so I am assuming the reason it is not working where I initially tested it has some other cause. Thanks for helping me out. I will get your solution working every on my site witth time :) – Tom Aug 23 '13 at 11:41
  • Actually looking at it again. It works in Chrome, Safari but not IE, FireFox and Opera. Anyhow, answer accepted, but I may return later with a more precise question. I need to figure out if there is causing the problem. – Tom Aug 23 '13 at 15:13
2

This should do it:

    img {
        max-width: 100%;
        height: auto;
    }

If the window is bigger than the image, the image will not be scaled. If the window is smaller than the image, the image should scale. I noticed you said that it doesn't in your comment to Krasimir's answer. You might want to check and see if there is other CSS that may be changing this behaviour.

17cliu
  • 21
  • 2
  • Did you even read the previous answer? This is the same solution that was proposed 9 hours ago – omma2289 Aug 18 '13 at 22:12
  • I know, I'm sorry about that. I wanted to comment about checking other CSS, but I don't have enough reputation to comment! I think it's possibly a container issue that is causing your images to not scale. – 17cliu Aug 18 '13 at 22:14
  • Hi. I think you are both correct since I have the solution wconfirmed tto work elsewhere on my site, so the place I originally tested the solution proposed somehow made that solution not work. (Trying to figure that out now.) – Tom Aug 23 '13 at 11:42