Question

I’ve made a simple website that is entirely scale-able…except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn’t work because stretching the browser too far horizontally or vertically would cause the image to distort.

note:
I’d rather not have to hide the overflow, if I’m correct that would just cut the image off when it becomes to large(correct me if I’m wrong here)

and setting the height/ width to a max/min didn’t seem like an ideal solution either.

but this problem seems to be one that I can’t believe others have not encountered, so I hope someone can help me figure out a solution. please help, please…this is stressing me out 🙁

Answer 1

Style the img tag:

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

Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.