min-width：100％とは何ですか？ width：auto実際には？

私はCodePen上のフルスクリーンビデオの良い例を発見した： https://codepen.io/dudleystorey/pen/knqyK min-width：100％とは何ですか？ width：auto実際には？

私は次のスタイルを理解することの困難を持っている：

video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
}

我々だけで最小幅と最小 - を指定することはできませんなぜ高さ？なぜ、幅と高さをautoに設定する必要がありますか？

出典

2017-02-01 twelve_chairs

Chromeでテストしましたが、width: auto;とheight: auto;のプロパティを削除しても正常に動作します。

Cargo-Cult Programmingの例が表示されている可能性があります（プログラマが必要と思ったために存在するコードですが、実際には必要ありません）。あるいは、従来のブラウザのバグの可能性があります。準拠の高度に<video>すべてのサポートCSSレイアウトをサポートするすべてのブラウザとして奇妙である、

出典

2017-02-01 18:55:09 Dai

ありがとうございました。あなたが「

これは良い例ではありません。min-width:100%はわかりません。

はこの考えてみましょう：div要素のページまたはコンテナの幅が600PX未満であれば、この場合

div{ 
    width:100%; 
    min-width:600px; 
}

を、400ピクセルを言います。その場合、divの幅を600ピクセルにデフォルト設定し、100％を超えるスクロールバーを追加します。

出典

2017-02-01 18:54:33 TheUknown

お返事ありがとうございます。この場合、 'min-width：100％; min-height：100％ 'はビデオのアスペクト比を破ります。 [全体のサイトを埋めるためにHTML5のビデオと縦横比をブレークする]（http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site）を参照してください。詳細はこちら –

-1

幅：オート

自動div要素またはpであるようなブロックレベル要素の初期の幅。このは、それが内の利用可能なすべての水平スペースを占めるように拡張します210を含む。水平なパディングまたは境界線がある場合、それらの幅は要素の合計幅に加算されません（）。一方

幅100％

あなたが幅を指定した場合、100％を、要素の総幅は、その包含ブロックに加えて任意の水平マージンの100％、パディングとボーダーになります（ボックスサイズ：border-boxを使用していない限り、の場合は、余白のみが100％に追加され、合計幅の計算方法が変更されます）。これはあなたが望むものかもしれませんが、そうでない可能性が最も高いでしょう。

最小幅は：