Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Aspect Ratio Image</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-slate-50 dark:bg-slate-900 min-h-screen p-8 flex flex-col items-center justify-center space-y-8"> <div class="w-full max-w-md"> <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-3">16:9 Aspect Ratio (Widescreen)</h3> <div class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-md relative group"> <img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b" alt="Photography" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-xl"></div> </div> </div> <div class="w-full max-w-md flex space-x-6"> <div class="w-1/2"> <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-3">1:1 (Square)</h3> <div class="aspect-square bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b" alt="Photography" class="object-cover w-full h-full hover:scale-105 transition-transform duration-500"> </div> </div> <div class="w-1/2"> <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-3">4:3 (Classic)</h3> <div class="aspect-[4/3] bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b" alt="Photography" class="object-cover w-full h-full hover:scale-105 transition-transform duration-500"> </div> </div> </div> </div> </body> </html>
