#StackBounty: #css #svg Relatively scale Svg inside fixed Div with CSS

Bounty: 50

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

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

enter image description here

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/


Get this bounty!!!

#StackBounty: #css #css3 #framework7 match the design to iphone4 & iphone 5

Bounty: 50

I have problem to match the buttons to iphone 4 and iphone 5 only.
all the other platform design phones looks good and responsive but only iphone 4 & 5 little strange.

as you can see in nexus, galaxy and iphone 6 it looks good
enter image description here
enter image description here

but in iphone 4 i need to scroll down and the forgot password and create account is one on the other.
enter image description here

enter image description here

enter image description here

<

div class=”snippet”>

<

div class=”snippet-code”>