はなぜさえずりtwitter.Inソースコードのフロントページでのフルスクリーン画像があり、この

Question

のようなフルスクリーンの画像を実装しない、彼らはこのような何かを：

HTML：

<div class="front-bg"> 
<img class="front-image" src="xxx.jpg"> 
</div> 

CSS：

.front-bg { 
position: fixed; 
width: 200%; 
height: 200%; 
left: -50%; 
} 
.front-bg img { 
margin: auto; 
min-width: 50%; 
min-height: 50%; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
} 

「top-left」プロパティを「.front-bg img」に設定する理由は何ですか？ そして、私はこのような何か変更した場合：

.front-bg { 
position: fixed; 
width: 100%; 
height: 100%; 
} 
.front-bg img { 
min-width: 100%; 
min-height: 100%; 
} 

をそれだけでなく、動作します。代わりに、幅を200％に設定するのはなぜですか？

Answer 1

これは、さまざまなアスペクト比を持つさまざまな画面を考慮しているため、画面の中央が常に中央になり、画面が縦長であるか横長であるかにかかわらず、十分な余裕があります。

Answer 2

{top：0;左：0;右：0;下：0; }

この画像は位置プロパティが設定されていないため、この部分はデスクトップ上ではまったく使用されません。別のデバイスで追加のメディアクエリを使用している可能性があります。

私は、200％/ 200％の背後にある理由とポジショニングマージンは、イメージをセンタリングするための好ましい方法で何かをしなければならないと言いたいと思います。 ％100 /％100では、シナリオ画像はブラウザウィンドウの左側の境界線に常に小さな画面で並べられます。適用することにより

マージン：0自動;分 - 幅：50％;

ブラウザウィンドウと同じ幅になり、常に中央に配置されます。