본문으로 건너뛰기

Aspect Ratio

Aspect Ratio

The aspect-ratio property helps you maintain the desired aspect ratio while adjusting the size of an element.

aspect-ratio is like a picture frame that defines the ratio of width to height for an image.

For example, a square frame has an aspect ratio of 1:1, and a typical photo frame has an aspect ratio of 4:3.


Code Example:

CSS
.box {
width: 100px;
aspect-ratio: 16 / 9;
background-color: lightblue;
}

Elements using the .box class are set with a width of 100px, and the height is automatically set to 56.25px (100/16*9) to maintain a 16:9 aspect ratio.


object-fit Property

The object-fit property is used to determine how content (e.g., an image) within an <img> or <video> tag should fit within the set height and width of that element.

object-fit is similar to deciding how a photo will be displayed when placed in a photo album.

  1. If the photo is too large, crop it:

    • object-fit: cover;
    • This value scales the content to fit the size of the container while maintaining its aspect ratio. If the content's aspect ratio does not match the container's, the excess parts will be cropped.
  2. If the photo is too small, place it in the center:

    • object-fit: none;
    • This value maintains the original size of the content without scaling, displaying it at its natural size regardless of the container's size, usually centered.
  3. Maintain the photo's ratio while filling the entire album:

    • object-fit: contain;
    • This value scales the content to completely fit the container while maintaining its aspect ratio. If the content does not fill the container, it will create margins.

Additionally, object-fit property can also take values like fill and scale-down.


Code Example:

CSS
.image {
width: 300px;
height: 200px;
object-fit: cover;
}

The .image maintains the original aspect ratio of the image while filling the element's size.

If the image is larger than the size of the element, it will be cropped so that only the important parts are shown.


filter Property

The filter property allows you to apply various graphic effects to images or elements. Effects like blur, transparency, saturation, and brightness can be applied.

filter is like adding filter effects to a photo.

Just like applying different filters to change the mood or feel of a photo after taking it with a camera app, you can use the CSS filter property to alter the feel of images or elements on a web page.


Code Example:

CSS
.filtered-image {
filter: grayscale(100%) blur(3px);
}

This .filtered-image has a black and white filter and a blur effect of 3 pixels applied. The image becomes black and white, and its edges are slightly blurred.


Follow the asterisk-highlighted part of the code to try inputting it.