Menu
I am building a custom app for the iPad and can use webkit specific code. I'm having difficulty with dynamic resizing images to fit within a specific div container. Is there code to do this? Also is the code to recrop an image with a mask if the image is portrait or landscape?
672
asked Dec 27 '10 05:12
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.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.
The easiest way to automatically resize an image with simple CSS:
img {
max-width: 100%;
}
No CSS3 or HTML 5 magic required. Here's a blog post with more information, and some JavaScript that improves scaling in IE: http://unstoppablerobotninja.com/entry/fluid-images/
189
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
