Html 调整窗口大小时图像大小纵横比错误（仅使用相对位置）

这个例子非常简单，我想知道为什么这两个图像的行为不同

这两个图像的高度为30%，这意味着当窗口高度改变时，这两个图像必须调整大小。图像的宽度必须始终成比例，因为他没有表示任何内容

不同之处在于，图像n1的位置相对而言是绝对秒

当我运行代码并修改窗口大小时，取决于大小，image1会如图所示变形，而imagen2始终正确形成。（以下图片示例的链接）

为什么

我需要使用相对图像而不是绝对图像，我不能

    #image1
{
    height:30%;
    position:relative;
}

#image2
{
    height:30%;
    position:absolute;
}

     <img id="image1" src="graficos/personajes/boo_grande.jpg">
     <img id="image2" src="graficos/personajes/boo_grande.jpg">

#图像1
{
身高：30%；
位置：相对位置；
}
#图2
{
身高：30%；
位置：绝对位置；
}

---

Absolute：这告诉浏览器，无论将要定位的内容都应该从文档的正常流程中删除，并将其放置在页面上的确切位置。相对：相对定位使用与绝对定位相同的四个定位属性，但不是将元素的位置基于浏览器视图端口，而是从元素仍处于正常流中时的位置开始。如果指定

width:auto或
宽度：自动！重要的对于您的相对定位图像，它会解决问题吗？Sergiy T，如果我将宽度设置为“自动”，则不抱歉：问题仍然存在。只是编码，所以如果我想保持纵横比，我必须使用绝对图像：(