How to Scale and Crop Images to a Fixed 80×80 Box with CSS

Practical Scenario

We need to display images from the backend inside an 80×80 container. Because the original images have inconsistent sizes, we first proportionally scale them based on the shorter side and then crop the central 80×80 region.

Example: a 600×370 image. The shorter side is 370, so we scale it by 80/370, resulting in a 130×80 image, then center‑crop the middle 80×80 area.

Code Implementation

1. Create an 80×80 container and set the image as its background.

2. Scale the background using background-size. If the image’s height is the shorter side, use background-size:auto 80px; if the width is shorter, use background-size:80px auto. The CSS background-size:cover handles both cases automatically.

3. Center the background with background-position:center center.

Final CSS example:

.img-box{
  width:80px;
  height:80px;
  background-image:url('your-image.jpg');
  background-size:cover;
  background-position:center center;
}