Images and Videos

Learn how to make images and videos adapt to different screens and devices for seamless display. Master responsive media techniques for optimal user experience in diverse viewing contexts.

1. Aspect Ratio

Aspect ratio CSS attributes and classes are used to control and maintain the aspect ratio of an element in web design. An aspect ratio is the ratio of an element's width to its height. These attributes and classes are particularly useful when working with responsive design, ensuring that elements maintain their desired proportions as the screen size or viewport changes. Let's go over the benefits:

Responsive Design: Aspect ratio attributes help in making web designs responsive. Elements can resize while maintaining their original aspect ratio, which ensures they look good on different screen sizes and orientations.

Preventing Layout Shifts: Without specifying an aspect ratio, elements like images or videos can load and change size, causing layout shifts that can be distracting and affect user experience. Setting aspect ratios helps prevent these shifts.

Consistent Design: Aspect ratios ensure that design elements, such as images or videos, remain consistent and retain their intended appearance across various devices and screen sizes.

Now, let's delve into the Tailwind CSS classes available for defining the aspect ratio of an element. These classes are primarily used when incorporating images and videos into a webpage.

aspect-auto: This class sets the aspect ratio of an element to be automatic, meaning it will adjust its height according to its content, maintaining the original width. It is useful when you want an element to adapt to its content dynamically without a fixed aspect ratio.
aspect-square: This class sets the aspect ratio of an element to be a perfect square, where the width is equal to the height. It's commonly used for creating square containers for images or other content.
aspect-video: This class sets the aspect ratio of an element to 16:9, which is a common aspect ratio for videos. It ensures that the element maintains a consistent 16:9 width-to-height ratio, making it suitable for embedding videos or any other content that needs this specific aspect ratio.

Example:

a. Adding a YouTube video

Code block

       <iframe
          className='w-full aspect-video rounded-lg shadow-lg'
          src="https://www.youtube.com/embed/dpXBV3COwJM?si=1t7jzRq6qTYxFhAR"
          allowFullScreen
          title="YouTube Video"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        ></iframe>

2. Using Custom Values

If you require an aspect ratio that is not covered by the provided Tailwind CSS classes, such as 4/3, you can easily customize Tailwind by adding this value to its configuration. Once you've made the necessary adjustments in the tailwind.config.js file as outlined below, a new class will become available for you to define a 4/3 aspect ratio.

Code block

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      aspectRatio: {
        '4/3': '4/3', // Add your custom aspect ratio here
      },
    },
  }
}

3. Responsive Image Sizing: Using Intrinsic Width and Height

In web design, when you're creating a responsive layout and you're not entirely certain about the aspect ratio you want for an image, it's essential to ensure that the image covers the available space within its container. To achieve this, one effective approach is to specify the width and height properties of the image equal to its intrinsic width and height.

Here's how it works:

Setting Intrinsic Width and Height: By setting the width and height properties of the image to be the same as its intrinsic width and height (the actual pixel dimensions of the image), you allow the browser to calculate the image's aspect ratio automatically.

Taking Up Available Space: With the width set to 100%, the image will expand to fill the entire width of its container, making it responsive to different screen sizes.

Automatic Aspect Ratio Calculation: When you set both the width and height based on the intrinsic dimensions, the browser will automatically calculate the height that maintains the image's original aspect ratio.

Ensuring Proper Scaling: This approach ensures that the image scales proportionally to cover the available space while preserving its original aspect ratio. This helps in preventing distortion and maintaining image quality.

Avoiding Layout Shifts: Another significant advantage of specifying the width and height properties of an image equal to its intrinsic width and height is that it helps prevent layout shifts during page loading. Without these values defined, images may load and adjust their size, causing unexpected and distracting layout shifts for users. By setting the dimensions upfront, you ensure that the space for the image is reserved from the beginning, eliminating any jarring shifts in the page layout as images load. This contributes to a smoother and more user-friendly browsing experience.

Example:

If you are creating a grid structure and want to add an image, specify the intrinsic width and height of the image as mentioned below to prevent layout shifts.

Thanks to the CSS applied in Tailwind preflight classes, the image automatically covers the entire available space, and the browser automatically calculates the appropriate height to be displayed based on the aspect ratio.

Code block

 <div className="grid grid-cols-3 gap-10 bg-white ">
          <div className='col-span-1'>
            <img className="rounded" src="b2-image.webp" width={600} height={400} alt="Large Width Image" />
          </div>
          <div className='self-center col-span-2'>
            <div className='text-2xl'>Good design is obvious. Great design is transparent.</div>
          </div>
        </div>

CSS Applied Using Tailwind Preflight Classes:

Code block

img, video {
  max-width: 100%;
  height: auto;
}

Next lesson - Backgrounds

In this lesson, we will delve into the implementation of background images on HTML elements. Additionally, we will explore various properties that provide control over these background images, including options for adjusting their size and determining whether they should repeat. This knowledge will empower you to customize the visual appearance of your web content effectively.

All Modules