CODEWITHSUNDEEP
cssresponsive-design
ThisBetterWork
ThisBetterWork

Reputation: 503

how can I make an image scale-able using css/html

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 :(

Upvotes: 6

Views: 16604

Answers (3)

Emily P.
Emily P.

Reputation: 23

I'm working on a project like this as well, and I used

img { width: 100%; }

as well and then made sure to size the divs around each image accordingly.

I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.

If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.

Upvotes: 0

Dave Snyder
Dave Snyder

Reputation: 1033

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.

Upvotes: 11

jp14
jp14

Reputation: 13

Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.

Upvotes: 0

Related Questions