001 001 - 6 months ago 13
CSS Question

How do I auto-resize an image to fit a div container

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?




Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.

Answer

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Example: http://jsfiddle.net/xwrvxser/1/