Question

我有两个矢量（.svg）图像，它们具有相同的宽度但高度不同。

Image1 = 1231x240，Image2 = 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;
}

但Image1的宽度比Image2大。

大多数情况下，当您放大或缩小屏幕时，差异会增大或减小!!

我做错了什么？

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

Answer 1

<强>更新：

注意：我在SVG图片中发现了问题。这就是为什么我为演示目的创建了两个新的SVG图像的原因。我像你的演示一样安排了图像，我还在不同的浏览器中检查了两个图像的宽度。

现在宽度显示完美。

SVG DEMO：

＆＃13;

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

＆＃13;

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

＆＃13;

缩放具有不同高度的.svg图像以获得相同的宽度

1 个答案: