<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 –
- object -fit
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.
image-rendering: auto | crisp-edges | pixelated
This is the default value. The applied image should be scaled with an algorithm that maximized the appearance of the image.
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.
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.
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.
object-fit: fill | contain | cover | none | scale-down
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.
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.
Same as a container but if the ratio of the image does not match with container then the image will be clipped.
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.
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.
object-position: top left center right bottom
With this property, we can actually handle the position and shifting of an image on the document.
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.
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom
This value aligns the baseline of the image or element with its container or parent baseline.
This value aligns the baseline of the image or element with the subscript baseline its parent.
This value aligns the baseline of the image or element with the superscript baseline its parent.
This value aligns the top of the image or element with the top of its parent text.
This value aligns the bottom of the image or element with the top of its parent text.
This value aligns the middle of the image or element with the baseline plus half the x-height of its parent.
This value aligns the top of the image or element with the top line its parent.
This value aligns the bottom of the image or element with the bottom line of its parent.
Using the length value, it aligns the baseline of the element above the baseline of its parent container.
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.
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.
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.