放大时内容缩小

Question

我在这里遇到一个非常奇怪的问题。每当我放大浏览器时，无论是125％还是150％，我的某些内容都会缩小。我有几个例子。

How it looks at 100%.

How it looks at 150%.

在我的CSS中，我将div标记为：

.section {
width: 100%;
position: relative;
overflow: hidden;

}

@media only screen and (min-width: 1900px) {
.section {
    height: 1080px;
}}

这是我在HTML顶部的内容：

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

我已经尝试过最小和最大高度，但这也不起作用。

在放大浏览器时如何保持所有内容的大小相同？