Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Aspect Ratio

Aspect ratio refers to the proportional relationship between the width and height of an element. It is used in CSS to ensure that an element maintains a specific width-to-height ratio, regardless of its size. This property is particularly useful for media elements, images, videos, and layouts.

Tailwind CSS provides utility classes to easily apply aspect ratio properties to your designs, enabling to create responsive components without the need to manually calculate dimensions. In this guide, we’ll explore the specifics of how to work with aspect ratios in Tailwind CSS.

ClassPropertiesExample
aspect-autoaspect-ratio: auto;<div className="aspect-auto"></div>
aspect-squareaspect-ratio: 1 / 1;<div className="aspect-square"></div>
aspect-videoaspect-ratio: 16 / 9;<div className="aspect-video"></div>

Overview of Aspect Ratio

Adding the Aspect Ratio

By default, Tailwind CSS includes commonly used aspect ratios. These utilities allow you to control the aspect ratio of an element effortlessly without needing to write custom CSS.

Here’s how to set a 16:9 aspect ratio for a container:

This is a live editor. Play around with it!
export default function AspectRatioContainer() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex justify-center items-center">
    <img
      src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
      alt="Aspect Ratio Example"
      className="aspect-video object-cover"
    />
    </div>
  );
}

Browser Compatibility

Tailwind’s utilities use only the native CSS aspect-ratio property which was unspported in pre-Safari 15 versions. For Safari 15 and above, the aspect-ratio plugin is a better option.

States and Responsiveness

Hover and Focus States

Tailwind CSS utility classes allow you to dynamically change the aspect ratio of an element on certain states, such as hover, focus, or active. This is particularly useful for interactive UI components.

The following code illustrates how to transition between a 16:9 aspect ratio and a 1:1 aspect ratio on hover:

This is a live editor. Play around with it!
export default function InteractiveAspectRatio() {
  return (
    <div className="w-screen h-screen bg-gray-200 flex justify-center items-center">
      <div className="bg-indigo-300 transition-all">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Hover State Example"
          className="aspect-video hover:aspect-square object-cover"
        />
      </div>
    </div>
  );
}

Breakpoint Modifiers

By combining aspect ratio utilities with modifiers like sm, md, and xl, you can adapt the layout across various devices.

Here is an example of a responsive square aspect ratio transitioning into a wide aspect ratio on larger screens:

This is a live editor. Play around with it!
export default function ResponsiveAspectRatio() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex justify-center items-center">
      <div className="bg-green-500">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Responsive Ratio Example"
          className="aspect-square lg:aspect-video object-cover"
        />
      </div>
    </div>
  );
}

Custom Aspect Ratio

Extending the Theme

If the predefined ratios do not fit your requirements, you can extend Tailwind’s theme configuration to create custom aspect ratios. This is done via the theme section of your Tailwind configuration file.

For instance, to add an aspect ratio of 3:4, modify your configuration as follows:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomAspectRatioComponent() {
  return (
    <div className="w-screen h-screen bg-gray-300 flex justify-center items-center">
      <div className="bg-purple-700">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Custom Aspect Ratio Example"
          className="aspect-3/4 object-cover"
        />
      </div>
    </div>
  );
}

Using Arbitrary Values

For even greater customization, Tailwind CSS supports arbitrary values that bypass theme limitations. You can define aspect ratios directly in your class names using square brackets.

Below is an implementation for a 4:3 aspect ratio:

This is a live editor. Play around with it!
export default function ArbitraryAspectRatio() {
  return (
    <div className="w-screen h-screen flex justify-center items-center">
      <div className="bg-yellow-500">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Arbitrary Ratio Example"
          className="aspect-[4/3] object-cover"
        />
      </div>
    </div>
  );
}

Real World Examples

Blog Post Cards with Square Thumbnails

A blog layout featuring square thumbnails with consistent aspect ratios and hover effects.

This is a live editor. Play around with it!
export default function BlogVideoGrid() {
  const blogPosts = [
    {
      id: 1,
      title: "Getting Started with React",
      thumbnail: "https://images.unsplash.com/photo-1633356122544-f134324a6cee",
      alt: "React code on screen",
      duration: "5:30",
      author: "Jane Cooper"
    },
    {
      id: 2,
      title: "Advanced CSS Techniques",
      thumbnail: "https://images.unsplash.com/photo-1542831371-29b0f74f9713",
      alt: "CSS code example",
      duration: "8:45",
      author: "John Smith"
    },
    {
      id: 3,
      title: "JavaScript Best Practices",
      thumbnail: "https://images.unsplash.com/photo-1579468118864-1b9ea3c0db4a",
      alt: "JavaScript code",
      duration: "6:15",
      author: "Mike Johnson"
    },
    {
      id: 4,
      title: "UI/UX Design Fundamentals",
      thumbnail: "https://images.unsplash.com/photo-1559028012-481c04fa702d",
      alt: "Design workflow",
      duration: "10:20",
      author: "Sarah Williams"
    },
    {
      id: 5,
      title: "Backend Development Guide",
      thumbnail: "https://images.unsplash.com/photo-1555099962-4199c345e5dd",
      alt: "Server setup",
      duration: "7:55",
      author: "Alex Turner"
    },
    {
      id: 6,
      title: "Mobile App Development",
      thumbnail: "https://images.unsplash.com/photo-1551650975-87deedd944c3",
      alt: "Mobile development",
      duration: "9:30",
      author: "Emma Davis"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {blogPosts.map((post) => (
        <div key={post.id} className="group">
          <div className="aspect-square rounded-lg overflow-hidden">
            <img
              src={post.thumbnail}
              alt={post.alt}
              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
            />
            <div className="absolute bottom-4 right-4 bg-black bg-opacity-75 px-2 py-1 rounded text-white text-sm">
              {post.duration}
            </div>
          </div>
          <div className="mt-4">
            <h3 className="font-bold text-lg">{post.title}</h3>
            <p className="text-gray-600 text-sm mt-2">By {post.author}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Real Estate Property Showcase

A property listing component with consistent image aspect ratios and property details.

This is a live editor. Play around with it!
export default function PropertyGrid() {
  const properties = [
    {
      id: 1,
      title: "Modern Downtown Apartment",
      src: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00",
      alt: "Modern apartment interior",
      price: "$450,000",
      beds: 2,
      baths: 2,
      sqft: 1200
    },
    {
      id: 2,
      title: "Suburban Family Home",
      src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233",
      alt: "Suburban house exterior",
      price: "$750,000",
      beds: 4,
      baths: 3,
      sqft: 2500
    },
    {
      id: 3,
      title: "Luxury Beach Villa",
      src: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750",
      alt: "Beachfront villa",
      price: "$1,200,000",
      beds: 5,
      baths: 4,
      sqft: 3800
    },
    {
      id: 4,
      title: "Mountain View Cabin",
      src: "https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8",
      alt: "Cabin in mountains",
      price: "$380,000",
      beds: 3,
      baths: 2,
      sqft: 1800
    },
    {
      id: 5,
      title: "City Center Loft",
      src: "https://images.unsplash.com/photo-1560448204-603b3fc33ddc",
      alt: "Modern loft interior",
      price: "$520,000",
      beds: 1,
      baths: 1,
      sqft: 950
    },
    {
      id: 6,
      title: "Countryside Estate",
      src: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6",
      alt: "Large estate house",
      price: "$1,500,000",
      beds: 6,
      baths: 5,
      sqft: 4500
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {properties.map((property) => (
        <div key={property.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <div className="aspect-video">
            <img
              src={property.src}
              alt={property.alt}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="p-4">
            <h3 className="text-xl font-bold">{property.title}</h3>
            <p className="text-2xl text-blue-600 font-bold mt-2">{property.price}</p>
            <div className="flex justify-between mt-4 text-gray-600">
              <span>{property.beds} beds</span>
              <span>{property.baths} baths</span>
              <span>{property.sqft} sqft</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Recipe Card Collection

A recipe showcase with consistent image proportions and cooking details.

This is a live editor. Play around with it!
export default function RecipeGrid() {
  const recipes = [
    {
      id: 1,
      title: "Mediterranean Salad",
      src: "https://images.unsplash.com/photo-1540189549336-e6e99c3679fe",
      alt: "Fresh Mediterranean salad",
      time: "15 mins",
      difficulty: "Easy",
      calories: 320
    },
    {
      id: 2,
      title: "Grilled Salmon",
      src: "https://images.unsplash.com/photo-1467003909585-2f8a72700288",
      alt: "Grilled salmon with vegetables",
      time: "25 mins",
      difficulty: "Medium",
      calories: 450
    },
    {
      id: 3,
      title: "Vegetarian Pizza",
      src: "https://images.unsplash.com/photo-1513104890138-7c749659a591",
      alt: "Homemade vegetarian pizza",
      time: "40 mins",
      difficulty: "Medium",
      calories: 285
    },
    {
      id: 4,
      title: "Chocolate Cake",
      src: "https://images.unsplash.com/photo-1578985545062-69928b1d9587",
      alt: "Dark chocolate cake",
      time: "60 mins",
      difficulty: "Hard",
      calories: 420
    },
    {
      id: 5,
      title: "Asian Noodle Bowl",
      src: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c",
      alt: "Noodle bowl with vegetables",
      time: "20 mins",
      difficulty: "Easy",
      calories: 380
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100">
      {recipes.map((recipe) => (
        <div key={recipe.id} className="bg-white rounded-2xl overflow-hidden shadow-md">
          <div className="aspect-square">
            <img
              src={recipe.src}
              alt={recipe.alt}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="p-4">
            <h3 className="text-xl font-bold mb-2">{recipe.title}</h3>
            <div className="grid grid-cols-3 gap-2 text-sm">
              <div className="text-center p-2 bg-gray-50 rounded">
                <p className="font-semibold">{recipe.time}</p>
                <p className="text-gray-500">Time</p>
              </div>
              <div className="text-center p-2 bg-gray-50 rounded">
                <p className="font-semibold">{recipe.difficulty}</p>
                <p className="text-gray-500">Level</p>
              </div>
              <div className="text-center p-2 bg-gray-50 rounded">
                <p className="font-semibold">{recipe.calories}</p>
                <p className="text-gray-500">Calories</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Product Gallery Grid with Video Aspect Ratio

A product showcase grid that displays items with video aspect ratio for visual interest.

This is a live editor. Play around with it!
export default function ProductGallery() {
  const products = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Premium watch on display",
      title: "Luxury Watch",
      price: "$299.99"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Wireless headphones",
      title: "Pro Headphones",
      price: "$199.99"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch",
      title: "Smart Watch",
      price: "$159.99"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Sunglasses",
      title: "Designer Sunglasses",
      price: "$129.99"
    },
    {
      id: 5,
      src: "https://images.unsplash.com/photo-1585386959984-a4155224a1ad",
      alt: "Leather wallet",
      title: "Classic Wallet",
      price: "$79.99"
    },
    {
      id: 6,
      src: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea",
      alt: "Leather bag",
      title: "Messenger Bag",
      price: "$249.99"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
      {products.map((product) => (
        <div key={product.id} className="group hover:shadow-lg transition-shadow duration-300">
          <div className="aspect-video">
            <img
              src={product.src}
              alt={product.alt}
              className="w-full h-full object-cover rounded-lg"
            />
          </div>
          <div className="p-4">
            <h3 className="text-lg font-semibold">{product.title}</h3>
            <p className="text-gray-600">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Portfolio Project Showcase

A portfolio layout with alternating aspect ratios for project thumbnails.

This is a live editor. Play around with it!
export default function PortfolioGrid() {
  const projects = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d",
      alt: "Web design project",
      title: "E-commerce Platform",
      category: "Web Development",
      description: "Full-stack e-commerce solution"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1558655146-d09347e92766",
      alt: "Mobile app design",
      title: "Fitness Tracking App",
      category: "Mobile Development",
      description: "iOS and Android fitness app"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      alt: "Marketing campaign",
      title: "Brand Strategy",
      category: "Marketing",
      description: "Complete brand overhaul"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "UI design",
      title: "Dashboard UI",
      category: "UI/UX Design",
      description: "Analytics dashboard design"
    },
    {
      id: 5,
      src: "https://images.unsplash.com/photo-1551434678-e076c223a692",
      alt: "Software development",
      title: "CRM System",
      category: "Software Development",
      description: "Custom CRM solution"
    },
    {
      id: 6,
      src: "https://images.unsplash.com/photo-1535957998253-26ae1ef29506",
      alt: "App development",
      title: "Social Media App",
      category: "Mobile Development",
      description: "Social networking platform"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {projects.map((project) => (
        <div key={project.id} className="group relative overflow-hidden">
          <div className="aspect-square lg:aspect-w-3 lg:aspect-h-4">
            <img
              src={project.src}
              alt={project.alt}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
            />
            <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <div className="flex flex-col justify-center items-center h-full text-white p-4 text-center">
                <h3 className="text-xl font-bold mb-2">{project.title}</h3>
                <span className="text-sm font-medium mb-2">{project.category}</span>
                <p className="text-sm">{project.description}</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Product Card Grid with Square Aspect Ratio

This example demonstrates a custom square aspect ratio for product cards in an e-commerce grid layout.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      title: "Premium Headphones",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      price: "$299.99"
    },
    {
      id: 2,
      title: "Wireless Speaker",
      image: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1",
      price: "$199.99"
    },
    {
      id: 3,
      title: "Smart Watch",
      image: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      price: "$249.99"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      {products.map((product) => (
        <div key={product.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div className="aspect-card">
            <img
              src={product.image}
              alt={product.title}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="p-4">
            <h3 className="text-xl font-semibold">{product.title}</h3>
            <p className="text-blue-600 font-bold mt-2">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Blog Hero with Cinematic Aspect Ratio

This example shows a custom cinematic aspect ratio for blog post hero images.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function BlogHero() {
  return (
    <article className="max-w-6xl mx-auto p-4">
      <div className="rounded-xl overflow-hidden shadow-2xl">
        <div className="aspect-cinematic relative">
          <img
            src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05"
            alt="Nature landscape"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
            <div className="absolute bottom-8 left-8 text-white">
              <h1 className="text-4xl font-bold mb-4">
                Exploring Nature's Hidden Wonders
              </h1>
              <div className="flex items-center space-x-4">
                <img
                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
                  alt="Author"
                  className="w-10 h-10 rounded-full"
                />
                <div>
                  <p className="font-semibold">John Doe</p>
                  <p className="text-sm opacity-75">June 15, 2023</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

Video Thumbnail with Portrait Aspect Ratio

This example demonstrates a custom portrait aspect ratio for video thumbnails in a vertical scrolling layout.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function VideoThumbnails() {
  const videos = [
    {
      id: 1,
      title: "Morning Yoga Routine",
      views: "1.2M views",
      duration: "10:25",
      thumbnail: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b"
    },
    {
      id: 2,
      title: "Urban Dance Tutorial",
      views: "856K views",
      duration: "15:30",
      thumbnail: "https://images.unsplash.com/photo-1547153760-18fc86324498"
    }
  ];

  return (
    <div className="flex space-x-4 p-6 bg-gray-100">
      {videos.map((video) => (
        <div key={video.id} className="w-64 bg-white rounded-xl overflow-hidden shadow-lg">
          <div className="aspect-portrait relative">
            <img
              src={video.thumbnail}
              alt={video.title}
              className="w-full h-full object-cover"
            />
            <div className="absolute bottom-2 right-2 bg-black/75 text-white px-2 py-1 rounded-md text-sm">
              {video.duration}
            </div>
          </div>
          <div className="p-4">
            <h3 className="font-semibold text-lg">{video.title}</h3>
            <p className="text-gray-600 text-sm mt-1">{video.views}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

Achieving consistent design is critical when utilizing Aspect Ratio utilities in Tailwind CSS across your project. To ensure uniformity, adopt predefined aspect ratio classes for commonly repeated design components. For instance, image galleries, card grids, and video thumbnails can all benefit from using identical aspect ratios, maintaining visual rhythm and alignment.

When you require unique designs, extending Tailwind’s configuration (theme.extend.aspectRatio) can create specific ratios tailored to your project. However, use custom configurations sparingly to align with the broader design system, ensuring the final output feels structured across all components.

Leverage Utility Combinations

Tailwind CSS’s utility-first approach allows for powerful combinations that simplify complex designs. Merging aspect utilities with classes like grid, flex, and object-cover can unlock sophisticated layouts.

To craft responsive designs, couple aspect utilities with breakpoint modifiers. For example, sm:aspect-square paired with lg:aspect-video ensures elements transition fluidly based on screen width. These combinations reduce the need for custom media queries and CSS complexity.

Accessibility Considerations

Enhance Readability and Navigability

Aspect ratios directly affect how content feels for users, especially when media such as images or videos are involved. Maintaining clear lines and consistent containers ensures readability. Pair ratios with appropriate padding and whitespace to keep designs clean.

The approach above enhances both navigability and aesthetic balance, contributing to a visually accessible interface without overwhelming users.

Focus on High Contrast

Contrast is critical for accessibility, particularly for users with visual impairments. Utilize backgrounds, borders, or overlays to ensure media framed within a specific aspect ratio is legible under different conditions.

This is a live editor. Play around with it!
export default function ContrastOverlay() {
  return (
    <div className="relative group">
      <div>
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Accessible Contrast"
          className="aspect-video object-cover"
        />
      </div>
      <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
        <span className="text-white font-semibold text-lg">
          Enhanced Visibility
        </span>
      </div>
    </div>
  );
}

The group-hover interaction emphasizes appropriate layering and contrast to highlight important elements while maintaining accessibility.

ContentPosition

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy