同じ高さを持つ異なる高さの.svg画像

Question

同じ幅であるが高さが異なる2つのベクトル（.svg）画像があります。

画像1 = 1231x240、画像2 = 1231x44。

私は（CSSの）両方の画像でこれをやろう：

<img src="images/p/p_s.svg" class="pantallaSup" > 
<img src="images/p/p_i.svg" class="pantallaInf" > 

.pantallaSup{ 
    height: auto; 
    width: 500px; 
} 

.pantallaInf{ 
    height: auto; 
    width: 500px; 
} 

が、画像1は画像2よりも大きな幅を取得します。

大抵の場合、画面をズームインまたはズームアウトすると、その差が増減します。

私は間違っていますか？

例：UPDATED https://jsfiddle.net/npk1c3u8/2/

Answer 1

：

注：私はあなたのSVG画像に問題が見つかりました。だから私はデモ用に2つの新しいSVG画像を作成しました。私はあなたのデモのような画像を配置していました、そして、私はまた、異なるブラウザで両方の画像の幅をチェックしました。

今、幅が完璧を示しています。

SVGのDEMO：

.maxSize{ 
 
\t width: 600px; 
 
\t background-color:gray; 
 
} 
 
.pantallaSup{ 
 
\t height: auto; 
 
\t width: 500px; 
 
} 
 
.pantallaInf{ 
 
\t height: auto; 
 
\t width: 500px; 
 
}

<div class="maxSize"> 
 
    <img src="http://imgh.us/svg-1.svg" class="pantallaSup" > 
 
    <img src="http://imgh.us/svg-2.svg" class="pantallaInf" > 
 
</div>