How do you make a responsive-svg on one of the axles?

[obi]

In fact, if the svg asks viewBoxit's scaled up, lifting its size under the container. But I want it to be on a horizontal axis only scaled up and vertically altered the height without internal scale.

The same svg mark is placed in div'a of different sizes. In the first section, displays are made only with styles and in the second attribution viewBox changing the violin to show what I want.

I note that the height of the green rectangle coincides with the width of the blue, i.e. the extension without prosperation is not appropriate.

var divs = document.querySelectorAll(".expected div");
for (var q=0; q<divs.length; ++q) { debugger

var d = divs[q];

var svg = d.querySelector("svg");

svg.setAttribute("viewBox", "0 0 10 " + 10 * d.clientHeight / d.clientWidth);

}

svg { display: block; width: 100%; height: 100%; }

div { display: inline-block; vertical-align: middle; border: 1px dotted red; }

section + section { margin-top: 1em; }

.a { width: 12em; height: 12em; }

.b { width: 4em; height: 8em; }

.c { width: 8em; height: 4em; }

<section>

<div class="a">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

<div class="b">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

<div class="c">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

</section>

<section class="expected">

<div class="a">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

<div class="b">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

<div class="c">

<svg viewBox="0 0 10 10">

<rect x="0" y="50%" width="100%" height="50%" fill="silver" />

<rect x="0" y="0" width="1" height="100%" fill="blue" />

<rect x="9" y="0" width="1" height="100%" fill="blue" />

<rect x="0" y="0" width="10" height="1" fill="green" />

</svg>

</div>

</section>

[charlenef]

Try it. CSS:

img{
   display:block;
   max-width:100%;
   height:auto;
}