Question

我在html中有一个图像，当我更改浏览器的大小时，图像和文本框也会改变它们的大小和位置。有人可以解释为什么会这样吗??

#economy123{
position:absolute;
top:67%;
left:53%;
}

<div class="result-temp"  >
<img id="economy123" src="{{ asset('assets/images/economy123.png') }}" >
</div>

Answer 1

如果您希望图像在调整浏览器大小后仍保持在同一位置，则需要使用像素而不是百分比。

例如：

.result-temp{
    width: 400px; 
    height: 400px;
}

#economy123{
    position:relative;
    top: 100px;
    left: 100px;
    width: 200px;  
    height: 200px; 
}

<div class="result-temp">
    <img id="economy123" src="{{ asset('assets/images/economy123.png') }}" >
</div>

即使在调整浏览器大小后，这也会使图像保持居中。

为什么Image会改变浏览器大小的位置

1 个答案: