放大时Div不会扩展宽度

Question

我有一个居中的div，宽度设置为50％，最大宽度设置为100％。然而，当我放大时，宽度不会增加，而每次放大时高度都会增加。为什么即使我将最大宽度设置为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%与父亲的宽度相关。

案例1

父亲的宽度为100%。在这种情况下，div的宽度将始终为50% 100% 50% 的屏幕，即使您放大/缩小。

案例2

父div具有绝对宽度（例如500px）。然后，div的{​​{1}}宽度为50% 500px，即250px。放大/缩小时，这将改变。

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