html - Is there a cross browser way to make an image shrink to fit? -
apologies if obvious, i'm no css expert.
when drop image straight onto web browser on browser, implement sort of "shrink fit" functionality. illustration video shows shrink fit in action on firefox:
http://youtu.be/1lw-ebyyxik
i want implement shown in video in application , have work cross browser greatest extent practical.
is there way this? various documents on web cover sort of give-and-take shrink fit none seem discuss how implement image across browsers in consistent manner.
i've looked @ code on browser when image has been dropped on , seem take different approach.
@slaks have tried suggestion on chrome , did not work. here's code tried:
<html> <head> </head> <body> <style> img { width: auto; height: auto; max-width: 100% max-height: 100% } </style> <img src="whn-data/image.png"> </body> </html> </head>
this code seems work:
img { margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; max-height:100%; max-width: 100%; } jsfiddle
margin: auto added maintain image centered (both horizontal , vertical).
the max-height , max-width limit image going bigger screen.
but technique has disadvantage: default size of image has bigger height/width of browser window or container in. if not margins appear on sides maintain image's default dimensions.
html css
No comments:
Post a Comment