Saya memiliki situs untuk digabungkan yang memiliki rasio aspek tetap kira-kira 16:9
lanskap, seperti video.
Saya ingin membuatnya terpusat dan berkembang untuk mengisi lebar yang tersedia, dan tinggi yang tersedia, tetapi tidak pernah tumbuh lebih besar di kedua sisi.
Sebagai contoh:
- Halaman yang tinggi dan tipis akan memiliki konten yang membentang selebar penuh dengan tetap menjaga tinggi proporsional.
- Halaman lebar yang pendek akan memiliki konten yang membentang dari ketinggian penuh, dengan lebar proporsional.
Ada dua metode yang saya pelajari:
- Gunakan gambar dengan rasio aspek yang tepat untuk memperluas penampung
div
, tetapi saya tidak bisa membuatnya berperilaku dengan cara yang sama di browser utama. - Menetapkan bantalan bawah yang proporsional, tetapi itu hanya berfungsi secara relatif terhadap lebar dan mengabaikan tingginya. Itu terus bertambah besar dengan lebar dan menampilkan bilah gulir vertikal.
Saya tahu Anda dapat melakukan ini dengan JS dengan cukup mudah, tetapi saya ingin solusi CSS murni.
Ada ide?
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%