Perché Twitter implementare un'immagine a schermo intero come questo

Question

V'è un'immagine a schermo intero nella prima pagina del twitter.In del codice sorgente, che fanno qualcosa di simile:

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; 
} 

Perché impostano la proprietà superiore/sinistra su ".front-bg img"? E se cambio qualcosa di simile:

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

Funziona così. Perché invece impostano la larghezza al 200%?

Answer 1

Penso che questo corrisponda a diverse schermate con proporzioni diverse in modo che il centro dell'immagine sia sempre centrato e abbia abbastanza "di riserva" sui bordi sia che lo schermo sia verticale o orizzontale.

Answer 2

{sopra: 0; a sinistra: 0; a destra: 0; fondo: 0; }

Questa parte non è utilizzata sul desktop in quanto questa immagine non ha la proprietà di posizione impostata, forse è utilizzata su dispositivi diversi con query multimediali aggiuntive?

Direi che il motivo dietro 200%/200% e margine di posizionamento deve fare qualcosa con il modo preferito per centrare l'immagine. Con l'immagine dello scenario% 100 /% 100 verrebbe sempre lasciato allineato al bordo sinistro della finestra del browser su schermi più piccoli. Applicando

margine: 0 auto; larghezza minima: 50%;

lo rendono largo come una finestra del browser e sempre centrato.