缩放浏览器时如何保持HTML长宽比

Question

我在网站上使用了很多具有固定长宽比的div。我使用像这样的padding-top技巧：-

页面以居中的1400px容器为单位，其中包含1：1的长宽比。

<div style="max-width:1400px;margin:auto 0;">
    <div style="width:100%;padding-top:100%;"></div>
</div>

但是，当客户放大或缩小网站时，长宽比会扩大或缩小。似乎是在使用浏览器的宽度而不是容器的宽度。

关于如何解决此问题的任何建议？它在我测试过的所有浏览器中都会发生。

注意：可能与视口相关，不确定。

以防万一，视口为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />