CSS-bildförhållande

Detta verktyg genererar CSS för ett width:height-bildförhållande med antingen den moderna egenskapen `aspect-ratio` eller den klassiska padding-hacket med procentsats. Det ger vanliga bildförhållande-förinställningar, egna width/height-fält (1-100), en live-förhandsvisning och kopieringsklar utdata. Förhandsvisningen anpassar sin rendering till den valda metoden så att du exakt kan se vad varje teknik ger.

1. Klicka på en Common Ratio-förinställning (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) eller ange egna Width och Height (1-100). 2. Välj en metod: Modern (`aspect-ratio`) eller Padding Hack. 3. Förhandsvisningsrutan renderar bildförhållandet med den valda tekniken. 4. Klicka på Copy på Output-kortet för att kopiera den genererade CSS:en.

Modern ger en enda rad: `aspect-ratio: <width> / <height>;`. Padding Hack ger en `.container` med `position: relative; width: 100%; padding-top: <height/width*100>%;` och en absolut positionerad `.content` som fyller den, vilket är den äldre tekniken för miljöer utan stöd för `aspect-ratio`. Förhandsvisningen använder samma stilar, begränsade till en maxbredd på 400px, så det visuella matchar den teknik som CSS:en beskriver.