CSS tutorial series: Styling Images

Images are an important part of a web page, which is why it is crucial to know how styling images is done since it can impact the way they appear on your web page.

There are various CSS properties which help you style images.

how to center an image?

You can center an image by selecting it and setting both margin-right and margin-left to auto and giving it a width of 50%. The display value of an image is inline by default so do not forget to change it to block.

img {
  display: block;
  margin: 0 auto;
  width: 50%;
}

Opacity on an image

We can use the property opacity on an image to define the transparency of your image as seen in the example below.

How to make an image fit in its container?

As seen previously in the example below, we've used object fit to fit an image in its container using object-fit property.

Property	Values
object-fit	fill, contain, cover, none, scale-down

• The fill property value is the default which either will stretch or be squished or even resized to fit specified dimensions.

• The contain property will resize the image to fit within the specified dimension while maintaining its aspect ratio.

• The cover property value will clip the image to fit and fill the specified dimensions while preserving its aspect ratio.

• The none property value will not resize the image.

• The scale-down property value will size down your image between the none and contain property values.
  

img {
  opacity: 0.5;
}

Object position

With the object-fit property comes a long the object-position property which helps you display the part of the image that you want for example.

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

Background images

By using the background-image property we can add a background image to a <div>. This property can sets one or multiple images as a background for an element.

div {
  background-image: url("image.jpg");

This property comes with a handful of other properties such as:

background-repeat, background-position, background-size, and background-attachement.

• The background-position property specifies the starting point of the background-image property. This property has multiple values

Values
top left, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x-axis position, y-axis position, x%, y%, initial, inherit

• The background-repeat property specifies if the background image will be repeated.

Values
repeat, repeat-x, repeat-y, no-repeat, initial, inherit

• The background-size property defines the size of the background image.

Values
auto, length, cover, contain, initial, inherit

• The background-attachement property specifies if a background scrolls along the page of is fixed.