自動余白のある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を拡大縮小する場合は、最大幅を使用することはできませんが、代わりにパーセント幅を使用するため、常にどちらかの側に罫線があります。メディアクエリーを使用して幅を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>

Answer 2

あなたはDIVに％の幅を設定して試すことができ、それは、ウィンドウのサイズ変更にサイズが変更されます。

他の醜いの方法は、ウィンドウのサイズ変更にJSで動的にサイズを変更することである（それはあなたのリサイズのために、独自のステップを定義することの利点が得られます）