具有自动边距的 css div 不会缩小答案

【问题标题】：css div with auto margins does not scale smaller具有自动边距的 css div 不会缩小
【发布时间】：2017-03-04 00:33:45
【问题描述】：

我有一个需要水平居中的 div，并且可以缩放到小于它的宽度。

我使用此代码使 div 居中，但它不适用于缩放。 div 的缩放比例不会小于它的最大宽度。 Firefox 和 IE 都是如此。

/* CSS doesnt work in Firefox and IE */
.center
{
    max-width: 940px;
    height: inherit;

    background-image: url(../img/koeien%20liggen.JPG);
    background-size: 100% auto;
    background-repeat: no-repeat;

    margin-left: auto;
    margin-right: auto;
}

/* HTML */
<div class="headerWrapper">
    <div class="center"></div>
</div>

在 IE、Firefox 和 Chrome 中调整浏览器大小时，如何将 div 水平居中并使其缩小？

【问题讨论】：

试试width: 100%;
边距：0 自动；虽然我不明白这个问题
请查看此链接：-w3schools.com/css/css_max-width.asp

标签： html css

【解决方案1】：

如果您希望中心 div 缩放，则不能使用最大宽度，而是使用百分比宽度，因此两侧总是有边框。使用媒体查询将宽度设置为 100%，从而在您选择的任何视口宽度上移除边框。还要记住，没有“身高：继承”之类的东西。 CSS 不比较对象，而是平等地影响对象。不过，您可以说“高度：自动”。

.center
{
    max-width: 50%;
    height: inherit;
    background-color: red;
    background-image: url(../img/koeien%20liggen.JPG);
    background-size: 100% auto;
    background-repeat: no-repeat;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.headerWrapper {
  background: aqua;
  }

<div class="headerWrapper">
    <div class="center">THING</div>
</div>

【讨论】：

【解决方案2】：

您可以尝试将 % width 设置为 div，它会在窗口调整大小时调整大小。

另一种丑陋的方法是在窗口调整大小时使用 js 动态调整它的大小（它会给你定义自己的调整大小步骤的优势）

【讨论】：