Development/CSS

css - 넓이(width)와 높이(height) 자동 조정하기

linuxism 2013. 10. 29. 11:59


Image auto resize to fit 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.

share|improve this question
up vote175down voteaccepted

do not apply a width in the image tag. set your css to max-width:100%; max-height:100%;

Also, read this http://unstoppablerobotninja.com/entry/fluid-images

share|improve this answer
 
And what about height? –  Nicola Peluchetti May 11 '11 at 11:28
 
doing this should scale the width and height. however i do not know that much about scaling based on height. –  Thorn007 May 13 '11 at 20:31
10 
This will not scale both the height and width. –  Neil Jun 7 '11 at 3:40
2 
height: auto; if you want to specify a width only –  Roi Sep 10 '12 at 23:28
1 
What if the image is too small? –  Scott Rippey Jan 3 at 23:01



출처 - http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container