Image auto resize to fit div container?

Do not apply a width in the image tag. Set your css to max-width:100%; max-height:100% Also, read this unstoppablerobotninja.com/entry/fluid-im....

Do not apply a width in the image tag. Set your css to max-width:100%; max-height:100%; Also, read this unstoppablerobotninja.com/entry/fluid-im....

– Nicola Peluchetti May 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 at 20:31 This will not scale both the height and width.

– Neil Jun 7 at 3:40.

Currently there is no way to do this correctly in a deterministic way, with fixed-size images such as JPEGs or PNG files. To resize an image proportionally, you have to set either the height or width to "100%", but not both. If you set both to "100%", your image will be stretched.

Choosing whether to do height or width depends on your image and container dimensions: If your image and container are both "portrait shaped" or both "landscape shaped" (wider than they are tall, and taller than they are wide, respectively), then it doesn't matter which of height or width are "%100". If your image is portrait, and your container is landscape, you must set width="100%" on the image. If your image is landscape, and your container is portrait, you must set width="100%" on the image.

If your image is an SVG, which is a variable-sized vector image format, you can have the expansion to fit the container happen automatically. You just have to ensure that the SVG file has none of these properties set in the tag: height width viewbox Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file every time you export, or write a script to do it.

Some interesting libraries for doing image resizing to fit the container: plugins.jquery.com/project/myimgscale code.google.com/p/jquery-imagefit-plugin.

Use CSS! Let it control the height and width of your container (div), and then let it scale your image (img) to match your container. Try this code.

This will not proportionally scale your image, it will stretch it. – Neil Jun 7 at 3:39 1 Proportional scaling was not a requirement of the OP. In fact, in one of the other comments, he specifically requested a means to adjust height and width.

Your downvote was not warrented. – james. Garriss Jun 7 at 15:47 s example implies proportional resizing, and it's reasonable to assume that in most cases people want proportional resizing.

This answer is misleading, so it's important that it doesn't rank highly. It's nothing personal. – Neil Jun 11 at 20:03.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions