* This is the key part - position and fit the image to the container */ * This is for responsive container with specified aspect ratio */ 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.īox-shadow: 3px 3px 6px rgba(0, 0, 0.

You just have to ensure that the SVG file has none of these properties set in the tag: height 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. If your image is landscape, and your container is portrait, you must set width='100%' on the image.If your image is portrait, and your container is landscape, you must set height='100%' on the image.If your image and container are both 'portrait shaped' or both 'landscape shaped' (taller than they are wide, or wider than they are tall, respectively), then it doesn't matter which of height or width are '%100'.If you set both to '100%', your image will be stretched.Ĭhoosing whether to do height or width depends on your image and container dimensions:

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

Autosize js