html - 具有自动边距的 css div 不会缩小

Question

我有一个 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 水平居中并缩小？

Answer 1

如果您希望中心 div 缩放，您不能使用最大宽度，而是使用百分比宽度，因此两侧总是有边框。在您选择的任何视口(viewport)宽度下，使用媒体查询将宽度设置为 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>