CSS Styling Images

CSS Styling Images

CSS can control the size, shape, spacing, borders, shadows, and visual effects applied to HTML images.

Images can be made responsive, cropped to fit a specific area, displayed with rounded corners, given borders and shadows, or modified with opacity and filter effects. CSS controls the presentation while the HTML <img> element continues to provide the image content and alternative text.

Image Width and Height

The width and height properties control the displayed dimensions of an image.

img {
  width: 400px;
  height: 250px;
}

Setting both dimensions can change the image's proportions if the CSS width and height do not match its original aspect ratio.

When only one dimension is set, the other dimension normally remains auto, allowing the browser to preserve the image's proportions.

img {
  width: 400px;
  height: auto;
}

Responsive Images

A common CSS technique allows an image to shrink when its container becomes narrower while preventing it from growing beyond its natural or otherwise determined size.

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

The max-width: 100% declaration prevents the image from becoming wider than its containing element. The height: auto declaration preserves its aspect ratio as its width changes.

CSS responsive sizing controls how an image is displayed. HTML features such as srcset, sizes, and the <picture> element can additionally allow the browser to choose among different image resources.

Image Borders

The border property can add a visible border around an image.

img {
  border: 3px solid #0088cc;
}

The border can use the same widths, styles, and colors available for other element borders.

Padding can also be added between the image and its border.

img {
  padding: 5px;
  border: 1px solid #999;
}

Rounded Images

The border-radius property rounds the corners of an image.

img {
  border-radius: 12px;
}

A percentage can create more strongly rounded shapes. A square image can be displayed as a circle with a radius of 50%.

.profile-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

The equal width and height create a square display area, object-fit: cover fills that area without distorting the image, and border-radius: 50% creates the circular shape.

object-fit

The object-fit property controls how replaced content such as an image is resized when both its displayed width and height define a specific area.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

The cover value preserves the image's proportions while filling the entire content box. Parts of the image may be cropped when its aspect ratio differs from the box.

aspect-ratio

The aspect-ratio property can define a preferred width-to-height ratio for the image's CSS box.

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Combining aspect-ratio with object-fit: cover is useful when several images with different original dimensions need consistent thumbnail proportions.

Image Opacity

The opacity property controls the transparency of the entire image element.

img {
  opacity: 0.6;
}

An opacity value of 1 is fully opaque, while 0 is fully transparent. Values between them create partial transparency.

Opacity can also be changed during interaction.

img {
  opacity: 0.7;
}
img:hover {
  opacity: 1;
}

Important information should not depend on a hover effect because hover is not available in the same way on every input device.

Image Shadows

The box-shadow property can add a shadow around the rectangular box of an image.

img {
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

The values specify the horizontal offset, vertical offset, blur radius, and shadow color.

The shadow follows the image element's box, including rounded corners created with border-radius.

Image Filters

The filter property applies graphical effects to an image.

img {
  filter: grayscale(100%);
}

CSS provides several filter functions that can alter the appearance of an image.

Multiple filter functions can also be applied in a single declaration.

img {
  filter: brightness(110%) contrast(110%);
}

Centering Images

An image can be centered horizontally by displaying it as a block and using automatic left and right margins.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

The shorthand margin property can express the same horizontal centering when the vertical margin is also known.

img {
  display: block;
  margin: 20px auto;
}

Styling Images Example

The following example compares a responsive image, a rounded image, and an image cropped with object-fit. Open the example in the editor and change the width, border radius, object-fit, shadow, opacity, or filter values to see how each property affects the image.

.responsive-image {
  max-width: 100%;
  height: auto;
}
.rounded-image {
  border-radius: 20px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}
.cropped-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}