Saya ingin membuat div
yang dapat mengubah lebar / tingginya saat lebar jendela berubah.
Apakah ada aturan CSS3 yang akan memungkinkan ketinggian berubah sesuai dengan lebar, sambil mempertahankan rasio aspeknya ?
Saya tahu saya bisa melakukan ini melalui JavaScript, tetapi saya lebih suka menggunakan CSS saja.
Jawaban:
Buat saja pembungkus
<div>
dengan nilai persentase untukpadding-bottom
, seperti ini:Ini akan menghasilkan
<div>
dengan tinggi sama dengan 75% dari lebar wadahnya (rasio aspek 4: 3).Ini bergantung pada fakta bahwa untuk pengisi:
Nilai padding-bottom untuk rasio aspek lainnya dan lebar 100%:
Menempatkan konten di div:
Untuk menjaga rasio aspek div dan mencegah kontennya melebar, Anda perlu menambahkan anak yang benar-benar diposisikan dan merentangkannya ke tepi pembungkus dengan:
Berikut adalah demo dan lain lebih mendalam demo
sumber
vw
unit:Anda bisa menggunakan
vw
satuan untuk lebar dan tinggi elemen. Ini memungkinkan rasio aspek elemen dipertahankan, berdasarkan lebar viewport.Atau, Anda juga dapat menggunakan
vh
untuk ketinggian viewport, atau bahkanvmin
/vmax
untuk menggunakan dimensi viewport yang lebih kecil / lebih besar (diskusi di sini ).Contoh: rasio aspek 1: 1
Untuk rasio aspek lainnya, Anda dapat menggunakan tabel berikut untuk menghitung nilai ketinggian sesuai dengan lebar elemen:
Contoh: grid 4x4 divs persegi
Berikut ini adalah Fiddle dengan demo ini dan di sini adalah solusi untuk membuat kotak persegi yang responsif dengan konten yang terpusat secara vertikal dan horizontal .
Dukungan browser untuk unit vh / vw adalah IE9 + lihat canIuse untuk info lebih lanjut
sumber
width:50%
danheight:50vw
tingginya sedikit lebih tinggi dari lebar, jadi tidak tepat proporsi 1: 1. Ada ide?Saya telah menemukan cara untuk melakukan ini menggunakan CSS, tetapi Anda harus berhati-hati karena dapat berubah tergantung pada aliran situs web Anda sendiri. Saya sudah melakukannya untuk menanamkan video dengan rasio aspek konstan dalam porsi lebar cairan situs web saya.
Katakanlah Anda memiliki video yang disematkan seperti ini:
Anda kemudian dapat menempatkan ini semua di dalam div dengan kelas "video". Kelas video ini mungkin akan menjadi elemen cair di situs web Anda sedemikian rupa sehingga, dengan sendirinya, ia tidak memiliki batasan ketinggian langsung, tetapi ketika Anda mengubah ukuran peramban itu akan berubah lebarnya sesuai dengan aliran situs web. Ini akan menjadi elemen yang mungkin Anda coba masukkan video tertanam Anda sambil mempertahankan rasio aspek tertentu dari video.
Untuk melakukan ini, saya meletakkan gambar sebelum objek tertanam dalam div kelas "video".
!!! Bagian yang penting adalah gambar memiliki rasio aspek yang benar yang ingin Anda pertahankan. Juga, pastikan ukuran gambar SETIDAKNYA sebesar yang terkecil yang Anda harapkan video (atau apa pun yang Anda mempertahankan AR) didasarkan pada tata letak Anda. Ini akan menghindari potensi masalah dalam resolusi gambar ketika ukurannya diubah. Misalnya, jika Anda ingin mempertahankan rasio aspek 3: 2, jangan hanya menggunakan gambar 3px x 2px. Ini mungkin berhasil dalam beberapa keadaan, tapi saya belum mengujinya, dan mungkin itu ide yang baik untuk dihindari.
Anda mungkin harus sudah memiliki lebar minimum seperti ini yang ditetapkan untuk elemen cairan situs web Anda. Jika tidak, sebaiknya lakukan hal itu untuk menghindari pemotongan elemen atau tumpang tindih saat jendela browser terlalu kecil. Lebih baik memiliki bilah gulir di beberapa titik. Lebar terkecil yang harus dimiliki halaman web adalah sekitar ~ 600px (termasuk kolom dengan lebar tetap) karena resolusi layar tidak menjadi lebih kecil kecuali Anda berurusan dengan situs ramah-ponsel. !!!
Saya menggunakan png yang benar-benar transparan, tetapi saya pikir itu tidak penting jika Anda melakukannya dengan benar. Seperti ini:
Sekarang Anda harus dapat menambahkan CSS yang mirip dengan yang berikut:
Pastikan Anda juga menghapus deklarasi tinggi atau lebar eksplisit di dalam objek dan tag embed yang biasanya datang dengan copy / paste kode embed.
Cara kerjanya bergantung pada properti posisi elemen kelas video dan item yang Anda inginkan mempertahankan rasio aspek tertentu. Itu mengambil keuntungan dari cara gambar akan mempertahankan rasio aspek yang tepat ketika diubah ukurannya dalam suatu elemen. Ini memberitahu apa pun yang ada dalam elemen kelas video untuk mengambil keuntungan penuh dari real estat yang disediakan oleh gambar dinamis dengan memaksa lebar / tinggi hingga 100% elemen kelas video yang disesuaikan oleh gambar.
Cukup keren, eh?
Anda mungkin harus bermain-main dengannya sedikit agar bisa bekerja dengan desain Anda sendiri, tetapi ini sebenarnya bekerja sangat baik bagi saya. Konsep umum ada di sana.
sumber
Elliot mengilhami saya untuk solusi ini - terima kasih:
aspectratio.png
adalah file PNG yang benar-benar transparan dengan ukuran rasio aspek pilihan Anda, dalam kasus saya 30x10 piksel.HTML
CSS3
Harap dicatat:
background-size
adalah fitur css3 yang mungkin tidak berfungsi dengan browser target Anda. Anda dapat memeriksa interoperabilitas (fe di caniuse.com ).sumber
Untuk menambahkan jawaban Web_Designer,
<div>
akan memiliki tinggi (seluruhnya terdiri dari padding bawah) sebesar 75% dari lebar elemen yang mengandungnya . Berikut ringkasan yang bagus: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Saya tidak yakin mengapa harus begitu, tapi memang begitu.Jika Anda ingin div Anda menjadi lebar selain 100%, Anda perlu div pembungkus lain untuk mengatur lebar:
Saya menggunakan sesuatu yang mirip dengan trik gambar Elliot baru-baru ini untuk memungkinkan saya menggunakan kueri media CSS untuk menyajikan file logo yang berbeda tergantung pada resolusi perangkat, tetapi masih skala secara proporsional seperti yang
<img>
biasa dilakukan (saya mengatur logo sebagai gambar latar belakang menjadi .png transparan. dengan rasio aspek yang benar). Tetapi solusi Web_Designer akan menyelamatkan saya permintaan http.sumber
Seperti yang dinyatakan di sini di w3schools.com dan agak mengulangi dalam jawaban yang diterima ini , menambahkan nilai sebagai persentase (penekanan milik saya):
Ergo, contoh yang benar dari DIV responsif yang menjaga rasio aspek 16: 9 adalah sebagai berikut:
CSS
HTML
Demo di JSFiddle
sumber
Karena @ web-tiki sudah menunjukkan cara untuk menggunakan
vh
/vw
, saya juga perlu cara untuk memusatkan di layar, di sini ada kode snippet untuk potret 9:16 .translateY
akan menjaga pusat ini di layar.calc(100vw * 16 / 9)
diharapkan tinggi untuk 9/16.(100vw * 16 / 9 - 100vh)
tinggi meluap, jadi, tarik ke atasoverflow height/2
akan membuatnya tetap di tengah layar.Untuk lansekap, dan tetap 16: 9 , Anda menunjukkan penggunaan
Rasio 9/16 mudah diubah, tidak perlu ditentukan sebelumnya
100:56.25
atau100:75
. Jika Anda ingin memastikan ketinggian terlebih dahulu, Anda harus mengganti lebar dan tinggi, misalnyaheight:100vh;width: calc(100vh * 9 / 16)
untuk potret 9:16.Jika Anda ingin beradaptasi untuk ukuran layar yang berbeda, Anda mungkin juga tertarik
@media (orientation: portrait)
/@media (orientation: landscape)
portrait
/landscape
untuk mengubah rasio.sumber
Ini adalah peningkatan pada jawaban yang diterima:
sumber
Saya menemukan solusi cerdas menggunakan
<svg>
dandisplay:grid
.Elemen Grid memungkinkan Anda untuk menempati ruang yang sama dengan dua (atau lebih) elemen, tanpa harus menentukan yang mana yang mengatur ketinggian. Yang berarti bahwa, di luar kotak, yang lebih tinggi menetapkan rasio .
Ini berarti Anda dapat menggunakannya seperti ketika Anda tahu konten tidak akan pernah cukup tinggi untuk mengisi seluruh "rasio" dan Anda hanya mencari cara untuk memposisikan konten di ruang ini (yaitu untuk memusatkannya di kedua arah gunakan
display:flex; align-items:center; justify-content:center
).Ini hampir sama dengan menggunakan transparan
<img>
dengandisplay:block
dan rasio yang telah ditentukan, kecuali yang<svg>
lebih ringan dan jauh lebih mudah untuk dimodifikasi (untuk mengubah rasio secara responsif, jika Anda perlu).Yang perlu Anda lakukan adalah mengubah
<svg>
rasio:<svg viewBox="0 0 4 3"></svg>
<svg viewBox="0 0 16 9"></svg>
Lihat itu berfungsi:
Tampilkan cuplikan kode
Jika Anda memerlukan solusi di mana elemen konten tidak diizinkan untuk mengatur rasio ketika itu lebih tinggi (dengan overflow tersembunyi atau otomatis), Anda perlu mengatur
position:relative
di grid danposition:absolute; height:100%; overflow-y: auto;
pada konten. Contoh:Tampilkan cuplikan kode
sumber
Mendasarkan pada solusi Anda, saya telah membuat beberapa trik:
Saat Anda menggunakannya, HTML Anda hanya akan
Untuk menggunakannya dengan cara ini: CSS:
dan js (jQuery)
Dan setelah ini, Anda hanya mengatur attr
data-keep-ratio
ke tinggi / lebar dan hanya itu.sumber
data-keep-ratio
tidakkeep-ratio
dan dapatkan nilainya menggunakan$(this).data('keep-ratio');
Anda dapat menggunakan svg. Buat posisi wadah / pembungkus relatif, letakkan svg pertama sebagai posisi statis dan kemudian letakkan konten yang benar-benar diposisikan (atas: 0; kiri: 0; kanan: 0; bawah: 0;)
Contoh dengan proporsi 16: 9:
image.svg: (dapat diuraikan dalam src)
CSS:
HTML:
Perhatikan bahwa inline svg tampaknya tidak berfungsi, tetapi Anda dapat urlencode svg dan menyematkannya dalam atribut img src seperti ini:
sumber
SCSS adalah solusi terbaik dalam kasus saya; menggunakan atribut data:
Sebagai contoh :
sumber
sumber
[data-aspect-ratio]
selector atribut tersedia untuk Anda di CSS.Meskipun sebagian besar jawaban sangat keren, sebagian besar dari mereka memerlukan gambar yang sudah berukuran benar ... Solusi lain hanya berfungsi untuk lebar dan tidak peduli dengan ketinggian yang tersedia, tetapi kadang-kadang Anda ingin menyesuaikan konten dengan ketinggian tertentu juga .
Saya sudah mencoba untuk menyatukan mereka bersama-sama untuk membawa solusi yang sepenuhnya portabel dan dapat di-ukuran-ulang ... Triknya adalah menggunakan penskalaan otomatis suatu gambar tetapi menggunakan elemen svg sebaris daripada menggunakan gambar yang telah dirender sebelumnya atau bentuk apa pun dari permintaan HTTP kedua ...
Perhatikan bahwa saya telah menggunakan nilai besar pada atribut lebar dan tinggi SVG, karena harus lebih besar dari ukuran maksimum yang diharapkan karena hanya bisa menyusut. Contohnya membuat rasio div 10: 5
sumber
Hanya ide atau retasan.
sumber
katakanlah Anda memiliki 2 div, div outher adalah sebuah wadah dan bagian dalamnya bisa berupa elemen apa pun yang Anda perlukan untuk mempertahankan rasio (img atau iframe youtube atau apa pun)
html terlihat seperti ini:
katakanlah Anda perlu menjaga rasio "elemen"
rasio => 4 banding 1 atau 2 banding 1 ...
css terlihat seperti ini
padding bila dispesifikasikan dalam% dihitung berdasarkan lebar bukan tinggi. .. jadi pada dasarnya Anda tidak masalah berapa lebar Anda tinggi akan selalu dihitung berdasarkan itu. yang akan menjaga rasio.
sumber
Saya telah mengalami masalah ini beberapa kali, jadi saya membuat solusi JS untuk itu. Ini pada dasarnya menyesuaikan ketinggian domElement sesuai dengan lebar elemen dengan rasio yang Anda tentukan. Anda dapat menggunakannya sebagai berikut:
<div ratio="4x3"></div>
Perlu diketahui bahwa karena mengatur ketinggian elemen, elemen tersebut harus berupa a
display:block
ataudisplay:inline-block
.https://github.com/JeffreyArts/html-ratio-component
sumber
Jika Anda ingin memasukkan kotak di dalam viewport pada tampilan portrait atau landscape (sebesar mungkin, tetapi tidak ada yang menempel di luar), beralih antara menggunakan
vw
/vh
pada orientasiportrait
/landscape
:sumber
Saya ingin membagikan solusi saya, di mana saya memiliki
img
tag -t mengisi rasio aspek tertentu. Saya tidak bisa menggunakanbackground
karena kurangnya dukungan dari CMS dan saya tidak akan memilih untuk menggunakan tag gaya seperti:<img style="background:url(...)" />
. Selain itu, lebarnya adalah 100%, sehingga tidak perlu diatur pada ukuran tetap seperti pada beberapa solusi. Ini akan skala responsif!sumber
Anda dapat mencapainya dengan menggunakan SVG.
Tergantung pada suatu kasus, tetapi dalam beberapa hal ini sangat berguna. Sebagai contoh - Anda dapat mengatur
background-image
tanpa mengatur ketinggian tetap atau menggunakannya untuk menanamkan youtube<iframe>
dengan rasio16:9
danposition:absolute
lain lainUntuk
3:2
rasio yang ditetapkanviewBox="0 0 3 2"
dan sebagainya.Contoh:
sumber
Cara sederhana mempertahankan rasio aspek, menggunakan elemen kanvas.
Coba ubah ukuran div di bawah ini untuk melihatnya beraksi.
Bagi saya, pendekatan ini bekerja paling baik, jadi saya membaginya dengan orang lain sehingga mereka bisa mendapat manfaat darinya.
Juga berfungsi dengan ketinggian dinamis!
sumber
Katakan bahwa Anda ingin mempertahankan Lebar: 100px dan Tinggi: 50px (yaitu, 2: 1) Lakukan saja perhitungan ini:
sumber
Yah, kami baru saja menerima kemampuan untuk menggunakan
aspect-ratio
properti di CSS.https://twitter.com/Una/status/1260980901934137345/photo/1
Catatan: Dukungan belum yang terbaik ...
https://caniuse.com/#search=aspect-ratio
sumber
Anda dapat menggunakan tata letak fluks (FWD).
https://en.wikipedia.org/wiki/Adaptive_web_design
Ini akan skala dan mempertahankan tata letak, ini sedikit rumit tetapi memungkinkan untuk mengubah ukuran halaman tanpa mendorong konten seperti (RWD).
Sepertinya responsif tetapi scaling. https://www.youtube.com/watch?v=xRcBMLI4jbg
Anda dapat menemukan rumus penskalaan CSS di sini:
http://plugnedit.com/pnew/928-2/
sumber
Saya menggunakan solusi baru.
Untuk rasio aspek utama
Namun, ini relatif terhadap seluruh viewport. Jadi, jika Anda membutuhkan div yang 30% dari lebar viewport, Anda dapat menggunakan 30vw sebagai gantinya, dan karena Anda tahu lebarnya, Anda menggunakannya kembali dengan ketinggian menggunakan unit calc dan vw.
sumber
Jika seluruh struktur kontainer berdasarkan persentase, ini akan menjadi perilaku default, dapatkah Anda memberikan contoh yang lebih spesifik?
Di bawah ini adalah contoh dari apa yang saya maksud, jika seluruh hierarki induk Anda berdasarkan%, penyesuaian jendela browser apa pun akan berfungsi tanpa js / css tambahan, apakah ini tidak mungkin dengan tata letak Anda?
sumber