如何在保持纵横比的同时使任意SVG扩展到其父容器？

Question

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 (eg <img src=s.jpg ... ) however SVGs will not display correctly (eg <img src="data:image/svg+xml..." )

Answer 1

You need to choose what happens when the aspect ratio of the parent element is different from the aspect ratio of the image. I have forked the fiddle to show one way to do it. For clarity, I left out the ph class and added the code to the img css.

The difference with the original code is that both width and height are auto to preserve the aspect ratio. Since max-height and max-width are provided, they will determine which dimension fills the container. The other dimension does not fill the container to preserve the aspect ratio.

You could also fill the container by cropping the larger dimension. The trick is to provide min-height and min-width instead.

EDIT after comments:

As suggested in the comment, I had not taken into account the possibility that the size of the parent ( body ) could be larger than the native size of the img . In that case, I cannot think of a pure css solution. I have forked the fiddle again here to show a solution using jQuery . Briefly, the script stores the image ratio immediately after loading and sets a handler for resizing. The procedure sets the minor dimension to that of the body and the other dimension accordingly.

EDIT for a pure javascript method:

See a pure javascript version here .