Relatively scale Svg inside fixed Div (CSS and JS)

Question

I have two svg graphics which do not have the same size, but the content does relatively suit each other, see the following example:

The Goal

I search for a solution which preserves the ratio between both svg´s while having both images in a "fixed frame".

The Problem

The following example shows how the left person "gets bigger" since the svg is smaller than the svg from the right person and can grow more inside the fxied frame (max-width and max-height 100%) like this

I can´t change the svg files (i.e. the viewbox) since they are loaded on a canvas and working right there.

This two SVGs are just an example, there are a lot of other SVGs with different sizes and ratios between each other.

JsFiddle

I prepared a Fiddle to play around and try possible solutions: https://jsfiddle.net/e6hs4w3s/

Answer 1

How about using a simple percentage based margins and sizes to scale both svg images accordingly within the fixed containers?

Here's what I came up with:

<div class="box">
  <img class="tile left" src="https://imgh.us/lay.svg" />
</div>

<div class="box">
  <img class="tile right" src="https://imgh.us/heart_23.svg" />
</div>

And the CSS:

.left {
  margin-top: 20%;
  margin-left: 25%;
  height: 80%;
  width: 75%;
}

.right {
  height: 100%;
  margin-right: 25%;
  width: 75%;
}

.box {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
}

Of course, you can change the percentages to your liking. Cheers!

Answer 2

I know you're looking to strictly use CSS, but as a (potential) fallback you could use JavaScript to resize the smaller svg, based on the ratio of the larger svg's computed height / natural height.

This is the line that resizes the smaller img based on the desired proportions: shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);

var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];

if (img1.naturalHeight > img2.naturalHeight) {
  tallImg = img1;
  shortImg = img2;
} else {
  tallImg = img2;
  shortImg = img1;
}

shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);

.Box {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
  vertical-align: bottom;
}

.Tile {
  max-width: 100%;
  max-height: 100%;
}

<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />

<hr />

<div class="Box">
  <img class="Tile" src="http://imgh.us/lay.svg" />
</div>

<div class="Box">
  <img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>

Answer 3

Use a more appropriate viewBox for the sitting person. Make the viewBox y and height components match the ones in the standing SVG.

In your case the "standing" SVG has a viewBox y=0 and height=367. The "sitting" SVG has a height=269.

If you make the sitting one have a viewBox height of 367 also, the proportions of the two will match. However you'll need to change the y component of its viewBox as well - otherwise it will be at the top of the SVG instead of the bottom. So we set the y component to (269-367) to correct that.

viewBox="0 -98 230.31494 367"

.Box {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
}

.Tile {
  max-width: 100%;
  max-height: 100%;
}

<div class="Box">

<svg
   class="Tile"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Ebene_1"
   x="0px"
   y="0px"
   width="6.499999cm"
   height="7.5915117cm"
   viewBox="0 -98 230.31494 367"
   enable-background="new 0 0 283.46 283.46"
   xml:space="preserve"
   inkscape:version="0.92.0 r15299"
   sodipodi:docname="zugewandt_nach_unten.svg"><metadata
   id="metadata27"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
   id="defs25" /><sodipodi:namedview
   pagecolor="#ffffff"
   bordercolor="#666666"
   borderopacity="1"
   objecttolerance="10"
   gridtolerance="10"
   guidetolerance="10"
   inkscape:pageopacity="0"
   inkscape:pageshadow="2"
   inkscape:window-width="1280"
   inkscape:window-height="657"
   id="namedview23"
   showgrid="false"
   units="cm"
   inkscape:zoom="1"
   inkscape:cx="51.890866"
   inkscape:cy="140.27666"
   inkscape:window-x="-8"
   inkscape:window-y="-8"
   inkscape:window-maximized="1"
   inkscape:current-layer="Ebene_1"
   fit-margin-top="0"
   fit-margin-left="0"
   fit-margin-right="0"
   fit-margin-bottom="0"
   inkscape:pagecheckerboard="true" />
<g
   id="g3"
   transform="matrix(-1.1825709,0,0,1.1825709,230.31821,-66.220423)">
	<path
   d="m 154.409,92.382 c 2.378,4.021 6.902,5.898 12.702,6.499 -4.37,4.104 -14.615,1.891 -12.702,-6.499 z"
   id="path5"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
	<path
   d="m 95.329,181.592 c -1.929,-2.74 -7.111,-5.074 -9.452,-8.567 1.326,-3.302 3.538,-5.093 5.612,-8.271 2.503,1.253 3.837,4.155 6.204,5.907 2.975,2.204 7.198,4.248 10.93,6.204 7.161,3.754 14.226,6.105 21.859,10.93 -1.638,3.984 -5.125,8.652 -7.976,12.406 -1.792,-0.078 -1.973,-1.018 -3.25,-2.362 1.052,4.188 3.411,6.844 6.203,9.452 3.106,2.9 13.093,7.684 13.884,12.702 0.667,4.229 -3.668,8.383 -6.499,9.747 -4.851,2.338 -11.467,2.618 -18.314,3.545 -17.772,2.408 -39.861,6.749 -54.353,10.634 -0.07,-3.613 0.012,-7.077 0.295,-10.338 7.509,-3.136 14.493,-7.042 22.154,-10.634 7.693,-3.607 16.185,-5.73 26.29,-6.5 3.629,-0.275 7.491,1.302 10.043,-0.295 -5.255,-1.816 -13.221,-2.709 -20.382,-1.772 -3.784,0.495 -9.981,4.586 -12.875,4.756 -4.165,0.245 -7.423,-6.422 -10.756,-8.891 -4.354,-3.225 -7.647,-6.24 -10.93,-9.749 -0.243,-7.731 0.063,-16.014 -3.249,-20.677 -0.934,4.94 0.733,11.296 0.295,19.2 -0.528,9.541 -3.121,20.377 -3.841,32.789 -0.318,5.496 -0.798,10.925 -0.295,17.428 0.388,4.998 2.265,13.149 1.182,16.247 -0.645,1.846 -6.201,5.688 -7.976,7.09 -4.705,3.72 -7.906,7.009 -13.588,7.68 -2.893,0.343 -6.303,-0.408 -6.794,-1.772 -0.258,-0.717 1.764,-2.797 3.25,-4.431 1.744,-1.918 2.818,-3.332 3.544,-4.431 1.965,-2.972 4.74,-6.738 6.203,-9.749 1.402,-2.883 0.811,-4.989 0.591,-8.861 -0.31,-5.44 0.422,-12.134 0,-17.428 -1.251,-15.694 -3.658,-33.514 -4.431,-51.103 -0.344,-7.83 -0.436,-15.952 0.591,-22.451 0.845,-5.349 4.916,-10.429 12.702,-7.975 2.738,0.862 8.226,5.452 10.93,7.384 10.395,7.428 19.205,17.48 32.199,22.156 z"
   id="path7"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
	<path
   d="m 165.633,186.908 c 1.453,8.804 -3.142,22.188 1.479,27.472 2.745,3.142 9.129,6.53 13.904,8.053 3.712,1.183 9.56,1.866 12.472,4.543 -3.165,2.398 -10.156,0.245 -14.266,-0.483 -5.991,-1.064 -12.716,-2.966 -18.609,-0.887 -4.011,1.414 -5.568,5.899 -10.34,5.612 -2.66,-0.501 1.098,-2.64 1.772,-4.135 4.068,-9.019 3.812,-23.248 2.067,-34.857 5.049,-0.566 8.242,-2.986 11.521,-5.318 z"
   id="path9"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
	<path
   d="m 40.091,237.219 c 0.182,4.248 -0.608,7.899 0,11.723 -9.146,1.374 -19.969,5.869 -29.54,6.499 -2.362,0.154 -5.277,0.199 -6.499,-1.772 0.896,-3.576 2.178,-3.695 4.333,-4.424 8.607,-2.91 15.533,-9.286 22.549,-12.709 2.045,-0.999 6.426,0.218 9.157,0.683 z"
   id="path11"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
	<path
   d="m 169.117,105.585 c -3.789,-2.385 -8.862,-2.115 -13.587,-0.295 -1.44,0.555 -2.468,1.662 -3.841,1.772 -3.503,0.283 -5.502,-0.698 -8.567,-2.068 0.831,2.518 3.815,2.881 5.908,4.136 -0.84,2.311 -1.232,0.879 -1.863,4.271 1.753,-0.043 2.258,-1.242 3.92,-2.761 2.919,-2.67 11.884,-7.785 16.258,-2.101 0.66,0.857 1.29,2.776 1.479,4.135 0.885,6.416 0.351,14.986 0,22.746 -0.697,15.317 -0.622,31.636 -2.66,41.946 -3.868,0.563 -6.138,2.725 -10.93,2.363 -1.492,-14.936 1.168,-36.355 -6.498,-46.081 -0.777,4.567 2.566,9.542 2.067,14.474 -0.373,3.697 -3.416,7.464 -5.021,10.93 -2.746,5.929 -4.522,12.689 -7.975,16.838 -5.693,-2.095 -11.339,-5.942 -16.542,-9.748 -2.36,-1.727 -7.439,-6.067 -7.976,-9.159 -0.516,-2.975 1.074,-7.574 2.068,-11.224 1.699,-6.246 3.776,-11.365 3.249,-19.201 -2.357,1.513 -2.405,4.688 -2.954,7.09 -0.567,2.476 -1.357,5.154 -2.068,7.679 -1.388,4.935 -5.411,13.406 -2.659,18.316 2.058,3.672 9.207,8.246 12.997,10.633 5.443,3.428 9.08,7.222 14.18,9.453 4.87,2.132 10.908,-0.73 15.746,-1.123 1.674,0.292 0.589,1.919 -0.268,3.207 6.101,1.975 15.711,-6.053 15.537,-1.493 -2.353,9.6 -23.563,12.656 -34.561,6.203 -8.282,-4.858 -18.467,-9.137 -26.585,-13.884 -2.803,-1.639 -5.919,-3.115 -8.271,-5.021 -2.07,-1.676 -6.064,-6.029 -6.499,-8.271 -0.8,-4.127 1.95,-10.061 3.249,-15.064 2.158,-8.304 3.753,-13.701 6.794,-20.382 0.924,-2.03 2.024,-4.664 2.954,-5.612 4.713,-4.809 18.369,-4.518 26.29,-6.794 2.859,-0.822 5.622,-2.228 6.794,-5.318 2.344,-6.177 -1.19,-12.252 -1.772,-17.723 -0.861,-8.079 1.603,-15.854 5.316,-20.383 6.295,-7.677 20.574,-12.459 31.312,-6.499 4.378,2.43 9.727,7.719 10.854,12.19 2.453,9.716 -4.879,23.439 -10.123,28.416 -1.647,1.565 -3.207,3.117 -5.752,3.407 z m -7.384,-20.677 c 0.229,0.065 0.342,0.247 0.294,0.591 3.046,1.599 5.774,-1.618 3.842,-4.135"
   id="path13"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
	<path
   d="m 162.186,55.997 c 0.199,0 0.196,0 0.396,0 6.142,0 11.791,1.277 15.852,4.135 4.196,2.953 8.647,8.275 9.748,13.588 1.209,5.828 -0.092,12.4 -2.067,17.428 -2.923,7.438 -9.257,13.562 -14.474,18.019 2.43,10.587 0.839,24.841 0.296,37.22 -0.468,10.617 -1.039,21.178 -2.659,30.426 1.421,0.761 2.186,0.926 2.363,3.249 0.125,1.649 -0.746,4.244 -2.954,5.907 -0.581,3.304 -0.086,8.046 -0.295,12.997 -0.196,4.656 -0.933,9.164 0.591,12.407 1.837,3.913 12.26,8.465 17.132,10.044 3.475,1.125 7.552,1.816 8.566,5.908 1.064,4.288 -8.802,2.549 -13.884,2.066 -5.919,-0.561 -11.474,-2.473 -15.95,-2.066 -3.359,0.304 -5.824,3.119 -8.862,5.021 -2.046,1.282 -8.383,3.896 -9.748,0 -0.917,-2.614 1.959,-5.31 2.954,-7.975 3.302,-8.851 3.733,-19.401 2.658,-31.607 -7.682,1.293 -13.458,-1.375 -18.905,-3.25 -2.427,4.663 -5.369,8.811 -8.271,12.997 4.168,6.246 16.768,9.067 17.725,18.02 1.525,14.28 -15.868,14.926 -27.472,16.542 -18.028,2.513 -39.852,6.658 -54.648,10.043 -0.06,3.664 0.596,6.441 0.886,9.158 0.283,2.663 1.301,6.291 0.591,9.452 -0.671,2.981 -5.512,5.316 -8.862,7.976 -5.566,4.418 -9.548,9.458 -17.428,9.748 -4.32,0.159 -10.468,-1.677 -10.634,-4.727 -0.109,-1.997 2.922,-4.173 4.431,-5.611 5.661,-5.403 11.798,-15.013 10.93,-20.088 -2.639,-0.34 -6,1.328 -9.453,2.068 -3.363,0.721 -7.076,1.395 -10.635,2.068 -5.167,0.977 -19.593,3.505 -20.086,-3.25 -0.5,-6.841 11.431,-7.824 16.542,-10.93 6.697,-4.069 12.635,-14.058 23.534,-8.613 -2.043,-15.677 -4.313,-36.206 -5.428,-54.158 -0.33,-5.322 -0.356,-10.632 0.209,-15.508 1.092,-9.412 6.831,-18.869 18.314,-15.656 2.347,0.657 5.177,3.024 7.681,4.726 7.516,5.112 14.579,11.641 21.563,16.247 3.45,-3.143 5.502,-4.255 7.208,-8.248 -1.796,-4.543 -0.257,-7.046 0.159,-8.922 1.07,-4.835 2.708,-6.9 4.154,-11.779 1.529,-5.16 2.977,-9.229 4.431,-14.178 1.398,-4.757 3.601,-8.829 7.09,-11.521 3.581,-2.763 8.66,-3.413 14.179,-4.431 3.427,-0.632 10.732,-0.849 13.588,-2.363 6.498,-3.447 1.389,-14.053 0.886,-20.677 -0.491,-6.473 0.888,-12.902 3.25,-17.429 4.873,-9.345 13.085,-13.365 24.808,-14.473 z m 12.683,46.181 c 5.244,-4.976 12.22,-18.445 9.769,-28.162 -1.13,-4.471 -5.963,-9.977 -10.341,-12.407 -10.737,-5.961 -25.016,-1.179 -31.311,6.499 -3.713,4.529 -6.177,12.304 -5.317,20.383 0.583,5.471 4.116,11.546 1.772,17.723 -1.172,3.09 -3.935,4.496 -6.794,5.317 -7.92,2.277 -21.577,1.985 -26.29,6.794 -0.93,0.948 -2.03,3.583 -2.954,5.612 -3.042,6.681 -4.637,12.077 -6.794,20.382 -1.299,5.003 -4.049,10.938 -3.249,15.065 0.435,2.242 4.429,6.594 6.499,8.271 2.352,1.905 5.468,3.382 8.271,5.021 8.118,4.748 18.191,9.22 26.585,13.884 10.919,6.067 31.195,3.359 34.562,-6.202 -0.572,-3.586 -10.684,4.357 -16.784,2.382 -0.675,-1.012 2.209,-3.449 0.535,-3.741 -4.839,0.394 -9.897,2.899 -14.767,0.769 -5.1,-2.233 -8.736,-6.025 -14.18,-9.454 -3.791,-2.386 -10.939,-6.961 -12.997,-10.634 -2.752,-4.91 1.271,-13.38 2.659,-18.314 0.71,-2.526 1.501,-5.203 2.068,-7.68 0.549,-2.401 0.597,-5.576 2.954,-7.089 0.527,7.834 -1.55,12.955 -3.249,19.201 -0.994,3.65 -2.584,8.248 -2.068,11.225 0.536,3.091 5.615,7.431 7.976,9.157 5.203,3.807 11.206,7.031 16.542,9.748 3.453,-4.147 5.229,-10.907 7.975,-16.838 1.605,-3.466 4.117,-7.768 5.022,-10.929 -0.897,-4.338 -2.846,-9.908 -2.068,-14.475 7.666,9.726 5.006,31.145 6.499,46.082 4.791,0.36 7.061,-1.801 10.93,-2.363 2.037,-10.31 1.962,-26.63 2.659,-41.947 0.351,-7.759 0.886,-16.33 0,-22.745 -0.188,-1.359 -0.818,-3.278 -1.478,-4.135 -4.374,-5.684 -12.805,-0.391 -15.724,2.278 -1.662,1.52 -4.009,3.831 -5.545,4.811 -0.104,-3.254 1.893,-4.276 2.954,-6.499 -2.093,-1.254 -5.077,-1.618 -5.908,-4.136 3.275,0.366 5.063,2.351 8.566,2.068 1.374,-0.11 2.4,-1.218 3.842,-1.772 4.724,-1.819 9.797,-2.09 13.587,0.295 2.297,-0.416 3.945,-1.88 5.592,-3.445 z M 62.935,159.385 c -2.704,-1.933 -8.192,-6.522 -10.93,-7.385 -7.786,-2.454 -11.857,2.627 -12.702,7.976 -1.027,6.499 -0.935,14.62 -0.591,22.45 0.773,17.589 3.179,35.409 4.431,51.103 0.422,5.295 -0.31,11.988 0,17.429 0.22,3.872 0.812,5.979 -0.591,8.861 -1.463,3.011 -4.238,6.776 -6.203,9.749 -0.727,1.098 -1.8,2.513 -3.544,4.43 -1.485,1.634 -3.507,3.714 -3.25,4.432 0.491,1.364 3.901,2.114 6.794,1.772 5.682,-0.672 8.883,-3.961 13.588,-7.68 1.775,-1.403 7.331,-5.245 7.976,-7.09 1.083,-3.099 -0.794,-11.249 -1.182,-16.247 -0.503,-6.503 -0.023,-11.933 0.295,-17.429 0.72,-12.411 3.313,-23.248 3.841,-32.789 0.438,-7.904 -1.229,-14.259 -0.295,-19.199 3.312,4.662 3.005,12.944 3.249,20.677 3.283,3.508 6.576,6.524 10.93,9.748 3.333,2.469 7.104,7.11 11.469,7.912 2.883,-0.617 8.379,-3.282 12.163,-3.777 7.162,-0.936 15.127,-0.043 20.382,1.772 -2.553,1.598 -6.414,0.021 -10.043,0.296 -10.105,0.77 -18.597,2.893 -26.29,6.499 -7.661,3.592 -14.645,7.498 -22.154,10.634 -0.284,3.262 -0.366,6.725 -0.295,10.339 14.491,-3.886 36.58,-8.226 54.353,-10.634 6.847,-0.927 13.463,-1.207 18.314,-3.545 2.831,-1.364 7.166,-5.52 6.499,-9.748 -0.791,-5.018 -10.777,-9.801 -13.883,-12.702 -2.792,-2.608 -5.151,-5.264 -6.203,-9.452 1.474,0.596 1.829,1.089 3.25,2.362 2.851,-3.754 6.337,-8.422 7.976,-12.406 -8.059,-3.791 -14.698,-7.176 -21.859,-10.929 -3.732,-1.957 -7.955,-4.001 -10.93,-6.204 -2.366,-1.753 -4.279,-3.636 -6.203,-5.907 -1.688,3.518 -4.286,4.969 -5.612,8.271 2.341,3.493 7.523,5.827 9.452,8.567 -12.999,-4.677 -21.809,-14.729 -32.202,-22.156 z m 77.983,18.314 c 3.315,0.798 7.125,-0.198 10.614,-0.698 -0.266,-7.613 0.624,-15.659 -0.57,-22.343 -3.257,7.772 -5.556,16.5 -10.044,23.041 z m 12.998,14.475 c 1.744,11.608 1.998,25.839 -2.068,34.856 -0.675,1.496 -3.701,3.508 -1.772,4.135 4.772,0.287 6.328,-4.197 10.338,-5.611 5.896,-2.08 12.621,-0.178 18.61,0.886 4.111,0.729 12.236,3.119 12.407,0 0.196,-2.137 -6.703,-2.824 -10.415,-4.007 -4.775,-1.522 -11.355,-4.963 -14.103,-8.105 -4.618,-5.282 -1.13,-18.618 -1.477,-27.471 -3.282,2.331 -6.473,4.75 -11.52,5.317 z m -93.345,37.809 c 7.416,-2.923 15.059,-5.618 20.973,-10.043 -7.239,-4.085 -12.655,-9.992 -18.019,-15.951 -1.016,8.634 -2.797,16.502 -2.954,25.994 z m -29.835,6.499 c -7.016,3.423 -13.585,10.512 -22.192,13.422 -2.154,0.729 -3.793,0.135 -4.689,3.711 1.222,1.973 4.137,1.928 6.499,1.773 9.57,-0.63 20.393,-5.126 29.54,-6.5 0.225,-3.832 0.379,-7.422 0.197,-11.67 -2.731,-0.464 -7.309,-1.734 -9.355,-0.736 z"
   id="path15"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill-rule:evenodd" />
	<path
   d="m 166.224,81.453 c 1.936,2.518 -0.793,5.734 -3.839,4.135 0.048,-0.344 -0.065,-0.526 -0.297,-0.591 0.29,-2.27 1.403,-3.718 4.136,-3.544 z"
   id="path17"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill-rule:evenodd" />
	<path
   d="m 158.249,85.588 c -0.214,1.265 -0.908,2.045 -1.773,2.659 0.62,7.552 8.587,7.759 16.247,8.271 -3.025,6.303 -16.426,9.722 -19.792,1.772 -1.105,-2.613 -0.167,-5.767 0.297,-9.157 -1.041,-1.271 -5.233,-0.809 -4.728,-2.659 2.581,0.588 7.026,0.102 9.749,-0.886 z m 9.672,12.849 c -5.8,-0.6 -11.134,-2.033 -13.512,-6.054 -1.913,8.389 7.679,11.042 13.512,6.054 z"
   id="path19"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill-rule:evenodd" />
	<path
   d="m 175.381,86.77 c 1.271,2.657 -2.075,5.457 -4.431,3.544 0.048,-0.344 -0.064,-0.526 -0.294,-0.59 0.035,-2.445 2.478,-4.557 4.725,-2.954 z"
   id="path21"
   inkscape:connector-curvature="0"
   style="clip-rule:evenodd;fill-rule:evenodd" />
</g>
</svg>
</div>

<div class="Box">
  <img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>