Tailwind CSS Object Fit

23 Mar, 2022
This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS object-fit property. This class is used to specify how an image or video should be resized to fit its content box for controlling a replaced element’s content resizing.
Object fit Classes:
object-contain 
object-cover 
object-fill 
object-none 
object-scale-down
object-contain: This class replaced image preserves the aspect ratio of the original image while fitting within the content box. Resize an element’s content to stay contained within its container.
Syntax:
<element class="object-contain">...</element>
Example 1:
HTML
<!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-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS object Class</b>     <div class="bg-green-300 w-full h-full">    <img class="object-contain h-48 w-full"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      </center></body>   </html>
Output:
object-cover: This class preserves the aspect ratio of the original image as the replaced image while fitting in the content box. Sometimes it is clipped to fit when the aspect ratio of the original image doesn’t match with the aspect ratio of the content box. Resize an element’s content to cover its container using this class.
Syntax:
<element class="object-cover">...</element>
Example 2:
HTML
<!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-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS object Class</b>     <div class="bg-green-300 w-full h-full">    <img class="object-cover h-48 w-full"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      </center></body>   </html>
Output:
object-fill: This class replaced image is stretched to fit the content box. The replaced image will completely fill the box needless of its aspect ratio. Stretch an element’s content to fit its container using the class.
Syntax:
<element class="object-fill">...</element>
Example 3:
HTML
<!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-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS object Class</b>     <div class="bg-green-300 w-full h-full">    <img class="object-fill h-48 w-full"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      </center></body>   </html>
Output:
object-none: In this class, the replaced image will ignore the aspect ratio of the original image. Hence, it is not resized. The class displays an element’s content at its original size ignoring the container size.
Syntax:
<element class="object-none">...</element>
Example 4:
HTML
<!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-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS object Class</b>     <div class="bg-green-300 w-full h-full">    <img class="object-none h-48 w-full"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      </center></body>   </html>
Output:
object-scale-down: This class replaced image is resized as if none or contain were specified and results in the smallest object size. The class displays an element’s content at its original size but scale it down to fit its container.
Syntax:
<element class="object-scale-down">...</element>
Example 5:
HTML
<!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-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS object Class</b>     <div class="bg-green-300 w-full h-full">    <img class="object-scale-down h-48 w-full"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    </center></body>   </html>
Output:
Tailwind CSS
Tailwind-Layout
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to create footer to stay at the bottom of a Web page?