Image Center Alignment CSS (object-fit)

summary

fill: Increase or decrease according to the frame of the element (magnificationo/ratiox)

cover: Enlarge until the frame of the element is full. Center-aligned (magnificationo/ratioo)

Example

//Fill the elements with the image center-aligned, and center-enlarged according to the ratio

img {
    width: 100px; // or 100%
    height: 100px; // or 100%
    object-fit: cover;
}

참조

Object-fit