Images

In this tutorial, I will be showing you the various properties which you can use to style your image element in HTML using CSS.

Image Dimension

The two (2) properties used to set the dimension of image are: height and width.

Image Opacity

Opacity refers to how transparent an element is. The opacity property in CSS is used to set the transparency of the image. Its values range from: 0.0 and 1.o.

Image Filter

The filter property in CSS is used to add visual effects to the image element. Its values include:

• blur(%)
• brightness(%)
• contrast(%)
• drop-shadow() - (h-shadow | v-shadow | blur | spread color)
• grayscale(%)
• hue-rotate(deg)
• invert(%)
• opacity(%)
• saturate(%)
• sepia(%)
• url() - take the address of an XML file that specifies the SVG filter.
• initial
• inherit

Object Fit

The object-fit property in CSS is used to specify how the object element should be resized to fit its container. Its values include:

• fill - image will stretch or squish to fit its container. (Default Value)
• contain - maintains the image aspect ratio, but resizes to fit within the container.
• cover - maintains the image aspect ratio, but resizes to fill the container even if some of the image parts has to be cut out.
• none - do not resize the image.
• scale-down - image scales down to the smallest version.

Object Position

The object-position property in CSS is used to together with the object-fit to specify how an image should be positioned inside its own container by setting its x / y coordinates.