CSS-kuvasuhde
Free online Css Aspect Ratio tool, no installation required
Tietoa CSS-näyttösuhteesta
Tämä työkalu generoi CSS:n leveys:korkeus näyttösuhteelle käyttäen joko modernia `aspect-ratio`-ominaisuutta tai klassista prosenttipadding-kikkaa. Se tarjoaa yleisiä suhde-esiasetuksia, mukautettuja leveys/korkeus-syöttöjä (1-100), live-esikatselulaatikon ja kopioivalmisulosteen. Esikatselu mukautuu renderöintinsä valittuun menetelmään, joten voit nähdä tarkalleen mitä kukin tekniikka tuottaa.
Käyttöohje
1. Napsauta Yleinen suhde -esiasetusta (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) tai anna mukautettu Leveys ja Korkeus (1-100). 2. Valitse menetelmä: Modern (`aspect-ratio`) tai Padding-kikka. 3. Esikatselulaatikko renderöi suhteen käyttäen valittua tekniikkaa. 4. Napsauta Kopioi Tuloste-kortilla kopioidaksesi generoidun CSS:n.
Menetelmät ja generoitu CSS
Moderni tuottaa yhden rivin: `aspect-ratio: <leveys> / <korkeus>;`. Padding-kikka tuottaa `.container`-komennon `position: relative; width: 100%; padding-top: <korkeus/leveys*100>%;` ja absoluuttisesti sijoitetun `.content`-komennon, joka täyttää sen, mikä on legacy-tekniikka ympäristöille ilman `aspect-ratio`-tukea. Esikatselu käyttää samoja tyylejä, rajoitettuna 400px enimmäisleveyteen, joten visuaali vastaa tekniikan, jota CSS kuvaa.
▶Kuin käyttäisin Padding-kikkaa Modernin sijaan?
▶Mikä alueen leveys- ja korkeussyöttö voi hyväksyä?
▶Tuottaako työkalu myös HTML:n lisäksi CSS:n?
▶Miksi esikatselu näyttää erilaiselta kahden menetelmän välillä?
Jos tämä työkalu on ollut sinulle hyödyllinen, harkitse kahvin ostamista.
Osta minulle kahvi