How to "crop" a rectangular image into a square with CSS?

html

responsive-design

css

web-development

byAnton Shumikhin·Dec 30, 2024

To remodel your rectangular image into a neat square, ensure width and height of the img element are the same and sprinkle some object-fit: cover. This neat CSS rule helps your image fill up its space, trimming off the excess, all without deforming the original image.

.square-crop {
  width: 100px; /* Uniform dimension for a perfect square */
  height: 100px;
  object-fit: cover; /* Smart crop and center, no distortion is the law */
}

<img src="image.jpg" class="square-crop" alt="A square with no round corners">

Voila! You now have a square image. It's all nice and centered, cropped without distorting the aspect ratio.

Advanced techniques and key scenarios

Picture perfect square with a background image

Use a div to your advantage, sprinkle some background-image magic for greater control over the image appearance:

.square-background {
  width: 100px;
  height: 100px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center; /* Fine tune positioning, it's an art */
  background-repeat: no-repeat; /* No duplications, we hate spam */
}

<div class="square-background"></div>

This method hits two birds with one stone; it's flexible for div backgrounds plus you can add additional content without tampering with the image display.

Responsive square for the adaptable

Adaptive designs and responsive configurations make your squares comfortable at every screen size:

.responsive-square {
  width: 50vw; /* Think dynamics, think viewport units */
  height: 0;
  padding-bottom: 50vw;
  position: relative;
}

.responsive-square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop master at work */
}

<div class="responsive-square">
  <img src="image.jpg" alt="Responsive square and proud">
</div>

The container now remains square, striking a pose at any viewport size.

Inclusive design with accessibility

Always remember to include alt attribute for descriptive information about your image:

<img src="image.jpg" class="square-crop" alt="Accesible image speaks volumes">

Accessibily is king. An alt text can make a world of difference for screen reader users.

Debugging and further boosts

Enhancing centering with flexbox

.square-flexbox {
  display: flex;
  justify-content: center; /* Call it meditation, let's center things */
  align-items: center;
  width: 100px;
  height: 100px;
  overflow: hidden; /* Excess be gone! */
}

.square-flexbox img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* Crop master strikes again */
}

When it comes to centering and spacing, flexbox is your most reliable ally.

Media queries for adjustable design

Use breakpoints to adapt your page at different canvas sizes:

@media (max-width: 768px) {
  .responsive-square {
    width: 90vw;
    padding-bottom: 90vw;
  }
}

By adjusting the width and padding-bottom within breakpoints, you'll never have to worry about your squares looking odd on different screens.

Square maintenance with pseudo-elements

Use ::after pseudo-element to create an invisible square and maintain height, without touching the image:

.aspect-ratio-box::after {
  content: '';
  display: block;
  padding-top: 100%; /* Width of the parent, because it can handle it */
}

Using ::after is like having a secret weapon to maintain the aspect ratio without anyone noticing.

explain-codes / Html / How to "crop" a rectangular image into a square with CSS?

Linked

Css: Background image and padding



100% width background image with an 'auto' height



Resize image proportionally with CSS?



When to use IMG vs. CSS background-image?



Adding a background image to a <div> element



Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?



How to stretch the background image to fill a div



Advanced techniques and key scenarios Debugging and further boosts