Devo mettere insieme un sito che ha un rapporto di aspetto fisso di circa 16:9
orizzontali, come un video.
Voglio che sia centrato ed espanso per riempire la larghezza disponibile e l'altezza disponibile, ma non ingrandirsi mai su entrambi i lati.
Per esempio:
- Una pagina alta e sottile avrebbe il contenuto che si estende su tutta la larghezza mantenendo un'altezza proporzionale.
- Una pagina corta e larga avrebbe il contenuto che si estende per tutta l'altezza, con una larghezza proporzionale.
Ci sono due metodi che ho esaminato:
- Usa un'immagine con le proporzioni giuste per espandere un contenitore
div
, ma non sono riuscito a farlo comportare allo stesso modo sui principali browser. - L'impostazione di un'imbottitura inferiore proporzionale, ma che funziona solo relativamente alla larghezza e ignora l'altezza. Continua a ingrandirsi con la larghezza e visualizza le barre di scorrimento verticali.
So che potresti farlo con JS abbastanza facilmente, ma mi piacerebbe una soluzione CSS pura.
Qualche idea?
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%