Important CSS Properties for IMG tag

The HTML <img> tag represents an image in the document and we can manipulate and control its behavior with CSS, such as masking, clipping etc. Today we discuss some of the important CSS properties that can be used in the img tag. These are –

  1. image-rendering
  2. object -fit
  3. object-position
  4. vertical-align
  5. filter

image-rendering

This CSS property is now in experimental phase. Basically, this CSS property uses to scale the image, and it provides a hint to the browser about the scaling algorithm.

Syntax

image-rendering: auto | crisp-edges | pixelated

Auto

This is the default value. The applied image should be scaled with an algorithm that maximized the appearance of the image.

Crisp-edges

The image will be scaled with an algorithm, that keeps up the edges and contrast as it is. That means it maintains the color contrast between pixels as it is. No smoothing is done when processing the image.

Pixalated

The image will be scaled up with an algorithm so that the nearest pixel of pixel might take up its appearance with a large pixel that is great for high-resolution screens.

With this property, we can actually handle the sharpness of an image on the document.

object-fit

This CSS property specifies that how the image will be placed into an element. This property is used on video tag also. This property is mostly similar to background-size but is also determines how the image sizes inside its container.  

Syntax

object-fit: fill | contain | cover | none | scale-down

Fill

This value causes the image to fill and stretch with the container. The entire image completely fills into the container box. If the image’s ratio does not match with the box then the image will be stretched and fit to the container box.

Contain

This value causes the image to fit within the container box. The entire image completely fits in the container element. If the aspect ratio is not matched with image ratio, then the image will be letterboxed.

Cover

Same as a container but if the ratio of the image does not match with container then the image will be clipped.

Scale-down

This value chooses and displays the smallest version of the image into container box.

With this property, we can actually handle the size and make a stretch of an image on the document.

object-position

This CSS property specifies the alignment of the image into its container box. This value is used to move the image inside the container with the given values. Value can be defined by coordinates and it can be measured by absolute or relative length units, or keywords like the top, left, bottom, right, and center. Also, it can be a valid combination of keywords and values.

Syntax

object-position: top left center right bottom

With this property, we can actually handle the position and shifting of an image on the document.

vertical-align

This CSS property specifies the vertical alignment of an image or an element. This property can be used in two contexts, one is aligned an inline element such as image within its container box and another is to align the table cell content.

Syntax

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom

Baseline

This value aligns the baseline of the image or element with its container or parent baseline.

Sub

This value aligns the baseline of the image or element with the subscript baseline its parent.

Super

This value aligns the baseline of the image or element with the superscript baseline its parent.

Text-top

This value aligns the top of the image or element with the top of its parent text.

Text-bottom

This value aligns the bottom of the image or element with the top of its parent text.

middle

This value aligns the middle of the image or element with the baseline plus half the x-height of its parent.

Top

This value aligns the top of the image or element with the top line its parent.

Bottom

This value aligns the bottom of the image or element with the bottom line of its parent.

length

Using the length value, it aligns the baseline of the element above the baseline of its parent container.

percentage

Using the length value with percentage, it aligns the baseline of the element above the baseline of its parent container.

With this property, we can actually handle the position of an image on the document within a container.

filter

This CSS property specifies the effects of making a shadow, blur of an element. This property is mostly used in image, backgrounds, and border to adjust the rendering. There are many of values of this property, here we just discuss with drop-shadow to make a shadow effect on our image.

Syntax

filter: drop-shadow(offset-x offset-y blur-radius spread-radius color)

The first two offset x and y represent the vertical and horizontal distance between the shadow and image. The third is the blur radius and fourth is the spread radius and fifth is the color or shadow.

With this property and value, we can actually handle the shadow of an image on the document.