7

Twitterのフロントページにフルスクリーンの画像があります。ソースコードでは、次のようなことをします。

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-bgimg」に設定するのですか？そして、私がこのようなものを変更した場合：

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

それも同様に機能します。なぜ彼らは代わりに幅を200％に設定するのですか？

4

2 に答える 2

1

{ トップ: 0; 左: 0; 右: 0; 下: 0; }

この画像には位置プロパティが設定されていないため、この部分はデスクトップではまったく使用されません。おそらく、追加のメディアクエリを使用して別のデバイスで使用されていますか?

200%/200% と配置マージンの背後にある理由は、画像を中央に配置するための好ましい方法で何かをしなければならないと思います。%100/%100 シナリオの画像は、小さい画面では常にブラウザ ウィンドウの左端に揃えられます。申請することで

マージン: 0 自動; 最小幅: 50%;

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

于 2013-02-22T15:14:20.383 に答える
0

これは、アスペクト比が異なるさまざまな画面を考慮して、画像の中央が常に中央に配置され、画面が縦向きか横向きかに関係なく、端に十分な「スペア」があるようにするためだと思います。

于 2013-02-22T15:04:21.577 に答える