Menu
I tried a Google search on this and still cannot figure out how to resize an image by its width for various mobile devices. Here is my attempt:
CSS:
img.test { width: 100%; height: auto; } HTML:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> <link rel="stylesheet" href="../includes/style.css"> </head> <img class="test" src="../includes/foo.jpg"> But the image is still being loaded with its original scaling. I am a css and html newb so any help would be great!
Edit:
Thanks for the responses. Here is a revised version that now works.
HTML:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> <link rel="stylesheet" href="../includes/style.css"> </head> <body width = "device-width"> <img class="test" src="../includes/buoy_map.jpg"> </body> 
796
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
img { max-width: 100%; } Should set the image to take up 100% of its containing element.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
