html - 放大时div宽度不扩大

Question

我有一个居中的 div，宽度设置为 50%，最大宽度设置为 100%。但是，当我放大时，每次放大时宽度都不会增加，而高度会增加。为什么即使我将 max-width 设置为 100%，也会发生这种情况，我该如何解决？谢谢。

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id = 'outer"></div>

P.S:我仍然想使用百分比而不是像素。

Answer 1

我想我明白你想要什么。你的问题是你把 <div> 放在哪里.

您可能知道，百分比是一种相对度量。特别是，width: 50%相对于父级的宽度。

案例一

父级的宽度是100% .在这种情况下，您的 div的宽度总是 50%的 100%这是50% 屏幕，即使您放大/缩小也是如此。

案例2

父 div 具有绝对宽度(例如 500px )。然后，你的 div的宽度将为 50%的 500px ，即 250px .当您放大/缩小时，这会改变。

这是一个显示这两种情况的 jsfiddle。希望这会有所帮助:https://jsfiddle.net/jormaechea/om91sody/