SVGコンテンツ - スケール幅のみとフルハイトを表示

Question

私はforeignObjectテキストを含むSVGを作成し、imgタグを使用してHTMLページにリンクしました。

svgの幅はデバイスごとに調整されますが、高さは約153pxに固定されています。私はsvgの幅と高さを100％に設定しました。

私はテキスト部分をデバイスごとに応答性とスケールにしたいので、固定高さをsvgにすることはできません。

したがって、画像に高さが完全に表示されないため、foreignObjectのテキストコンテンツが途切れることがあります。

私はviewBoxとpreserveAspectRatioを失敗しました。ここ

は、私がこのような状況のいずれかの解決策のための任意のJSを使用することはできません実際の使用からJsfiddle example

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/> 

スクリーンショット

です。

Answer 1

ビューポートのパーセンテージ長：

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

ビューポートのパーセンテージ長は 初期包含ブロックのサイズに対するものです。ブロックを含む最初の の高さまたは幅が変更されると、それに応じて拡大/縮小されます。ただし、 ルート要素のオーバーフローの値がautoの場合、すべてのスクロール バーは存在しないものとみなされます。画像が入った容器にする必要があり

body { 
 
    height: 100vh; 
 
} 
 
img { 
 
    width: 100%; 
 
    height:100%; 
 
}

<img src="http://treebliss.com/shipping.svg" />

Answer 2

：100％の両方 のhtml/body要素の高さを設定する代わりに、あなたはまた、 ビューポート-パーセントの長さを使用することができます100％の高さ（VH）

私はfiddle

div { 
text-align: center; 
height: 100vh; 
} 
img { 
border: thin dotted darkgrey; 
width: 100%; 
height: 100%; 
} 

を作成しました