I want to make an arbitrary SVG scale up to its parent container while maintaining aspect ratio. Note that I can't modify the SVGs themselves, so solutions involving modification of the SVG, like editing its viewBox attribute, are not applicable here.
Here is a JSfiddle to demonstrate the issue: https://jsfiddle.net/mj9o0nea/
If you modify the size of the window, you will see that the image scales without maintaining aspect ratio.
CSS from that JSfiddle:
html {
height: 100%;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
body {
height: 100%;
margin: 0 0 0 0;
}
img {
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
padding: 0;
left: 5%;
right: 5%;
top: 3%;
bottom: 3%;
max-height: 94%;
max-width: 90%;
}
.ph {
width: 100%;
max-width: 100%;
max-height: 100%;
}
Normal images like JPGs will display correctly, scaled and centered (e.g. <img src=s.jpg ...
) however SVGs will not display correctly (e.g. <img src="data:image/svg+xml..."
)
preserveAspectRatio
attribute inside thesrc
attribute, or something else? As far as I know, it wouldn't have any effect on an SVG that doesn't have a viewBox attribute. Maybe you are thinking about something else? I'm not really familiar with SVGs.