Tailwind CSS Object Fit
It acknowledges more than one value in tailwind CSS. Every one of its properties is covered as in class form. It is the option in contrast to the CSS object-fit property. The object fit class is utilized to indicate how a picture (image) or video ought to be resized to accommodate its content box for controlling a supplanted element's content resizing.
Object fit Classes
There object fit classes are classified as:
- object-contain
- object-cover
- object-fill
- object-none
- object-scale-down
- object-contain
This class supplanted image preserves the perspective proportion of the original image while fitting inside the content box. It resizes an element's content to remain held inside its container.
Syntax:
<element class="object-contain">...</element>
Example:
Example for object-contain class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>object Class - Tailwind CSS </b> <div class="bg-red-300 w-full h-full"> <img class="object-contain h-48 w-full" src= "javatpoint logo_image.png"> </center> </body> </html>
Output:
- object-cover
It protects the aspect ratio of the original image as the supplanted image while fitting in the content box. Sometimes it is cut to fit when the aspect ratio of the original picture doesn't coordinate with the aspect ratio of the content box. It resizes an element's content to cover its container utilizing this class.
Syntax:
<element class="object-cover">...</element>
Example:
Example for object-cover class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>object Class - Tailwind CSS </b> <div class="bg-red-300 w-full h-full"> <img class="object-cover h-48 w-full" src= "javatpoint logo_image.png"> </center> </body> </html>
Output:
- object-fill
This class supplanted image is extended to fit the content box. The supplanted image will totally fill the box unnecessary of its aspect ratio. Stretch an element’s content to accommodate its container utilizing the class.
Syntax:
<element class="object-fill">...</element>
Example:
Example for object-fill class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>object Class - Tailwind CSS </b> <div class="bg-red-300 w-full h-full"> <img class="object-fill h-48 w-full" src= "javatpoint logo_image.png"> </center> </body> </html>
Output:
- object-none
In this class, the supplanted image will overlook the aspect ratio of the original picture. Subsequently, it isn't resized. The class shows an element's content at its original size overlooking the container size.
Syntax:
<element class="object-none">...</element>
Example:
Example for object-none class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>object Class - Tailwind CSS </b> <div class="bg-red-300 w-full h-full"> <img class="object-none h-48 w-full" src= "javatpoint logo_image.png"> </center> </body> </html>
Output:
- object-scale-down
This class supplanted image is resized as though none or contain were indicated and brings about the littlest object size. The class shows an element's content at its original size yet scales it down to accommodate its container.
Syntax:
<element class="object-scale-down">...</element>
Example:
Example for object- scale-down class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>object Class - Tailwind CSS </b> <div class="bg-red-300 w-full h-full"> <img class="object-scale-down h-48 w-full" src= "javatpoint logo_image.png"> </center> </body> </html>
Output:
