Styling Images

CSS Styling Images

CSS can control the size, shape, spacing, alignment, and other visual characteristics of images. These styles can make images fit their containers, adapt to different screen sizes, and blend naturally with the rest of a page design.

Image Size

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

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

Setting the width while using height: auto; allows the browser to calculate the height from the image's intrinsic aspect ratio, helping prevent distortion.

Responsive Images

An image can be allowed to shrink when its container becomes narrower by using max-width: 100%;.

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

The image can display at its natural size when space is available but will not become wider than its containing element. This is a common technique for making images flexible in responsive layouts.

Browser Result

Image Borders

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

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

The border width, style, and color can be changed to match the design of the page.

Rounded Images

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

img {
  border-radius: 10px;
}

Larger values create more rounded corners. A square image can be displayed as a circle by using a border-radius of 50%.

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

Image Spacing

Margins can add space around an image, while padding can add space between the image content and its border.

img {
  margin: 10px;
  padding: 5px;
  border: 1px solid #cccccc;
}

In many designs, margin is the more common choice when the goal is simply to separate an image from nearby text or other elements.

Centering Images

An image can be centered horizontally by making it a block-level box and setting its left and right margins to auto.

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

This technique works when the image has a width that is narrower than its containing element.

Using object-fit

The object-fit property controls how an image is resized when both its displayed width and height are constrained.

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

The cover value preserves the image's aspect ratio while filling the specified area. Parts of the image may be cropped when its proportions do not match the dimensions of the box.

Another common value, contain, scales the entire image so it fits within the box without cropping, which can leave unused space around the image.

Image Shadows

The box-shadow property can add a shadow around an image's box.

img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

A shadow can visually separate an image from its background, but subtle values generally keep the effect from distracting from the image itself.

Combining Image Styles

Several CSS properties can be combined to create a complete image treatment.

.styled-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 3px solid #0088cc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

Browser Result

Try Styling Images

Edit the CSS in the example to change the image width, border, rounded corners, spacing, and shadow. Try changing the preview width to see how the image responds when less space is available.

Summary

CSS provides many ways to control the presentation of images. The width, height, and max-width properties control displayed size, while borders, margins, border-radius, and box-shadow can change an image's visual appearance. The object-fit property provides additional control when an image must fit within specific dimensions.

The next tutorial covers Styling Tables and explains how CSS can control table borders, spacing, alignment, backgrounds, and other presentation.