Relativ Skala Svg innen fixiert Div (CSS und JS)

Question

Ich habe zwei SVG-Grafiken, die nicht die gleiche Größe haben, aber der Inhalt relativ zueinander passt, siehe folgendes Beispiel:

Das Tor

Ich suche nach einer Lösung, die das Verhältnis zwischen beiden svg's behält, während beide Bilder in einem "festen Rahmen" haben.

Das Problem

Das folgende Beispiel zeigt, wie die linke Person „wird immer größer“, da die svg kleiner als die svg von der richtigen Person und kann mehr innerhalb des fxied Rahmen wachsen (max-width and max-height 100%) wie diese

ich kann die sVG-Dateien ändern (dh das Sichtgerät), da sie auf einer Leinwand geladen und direkt dort arbeiten.

Diese zwei SVGs sind nur ein Beispiel, es gibt eine Menge anderer SVGs mit verschiedenen Größen und Verhältnissen zwischen einander.

JsFiddle

bereitete ich eine Fiddle um zu spielen und versuchen, mögliche Lösungen: https://jsfiddle.net/e6hs4w3s/

Answer 1

Ich weiß, dass Sie suchen streng CSS verwenden, sondern als (potenzielle) Rückfall Sie JavaScript verwenden, könnte die kleinere svg, bezogen auf das Verhältnis der Größe ändern größere svgs berechnete Höhe/natürliche Höhe.

Das ist die Linie, die die kleineren img auf den gewünschten Anteilen basiert die Größe: 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>

beide svg Bilder entsprechend

Answer 2

Verwenden Sie eine geeignetere viewBox für den Sitzenden. Stellen Sie sicher, dass die y- und height-Komponenten von viewBox mit denen im stehenden SVG übereinstimmen.

In Ihrem Fall hat das "stehende" SVG eine viewBox y = 0 und height = 367. Das "sitzende" SVG hat eine Höhe = 269.

Wenn Sie die Sitzung haben eine ViewBox Höhe von 367 auch haben, stimmen die Proportionen der beiden überein. Allerdings müssen Sie auch die y-Komponente der viewBox ändern - andernfalls wird sie an der Spitze des SVG statt an der Unterseite angezeigt. Also setzen wir die y-Komponente auf (269-367), um das zu korrigieren.

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)"> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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" /> 
 
\t <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>

Answer 3

Wie wäre es ein einfaches prozentuales Margen mit und Größen skalieren innerhalb die festen Behälter?

Hier ist, was ich kam mit:

<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> 

Und die 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; 
} 

Natürlich können Sie die Prozentsätze nach Ihren Wünschen verändern. Prost!