Logo
×

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
  1. 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:

Tailwind CSS Object Fit
  1. 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:

Tailwind CSS Object Fit
  1. 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:

Tailwind CSS Object Fit
  1. 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:

Tailwind CSS Object Fit
  1. 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:

Tailwind CSS Object Fit

Related Topics

Tailwind CSS Grid Column Start / End

This class accepts multiple values, and all of the properties are covered in class form. It was used as a replacement to the CSS grid-column property in CSS to express...

3 minutes read.

Tailwind CSS Z-index

The tailwind CSS framework is a CSS utility framework that provides classes for managing HTML content with CSS. Tailwind CSS simplifies our design process and makes it responsive across numerous...

4 minutes read.

Tailwind CSS Position

The position class acknowledges more than one value in tailwind CSS. It is an option in contrast to the CSS Position property. This class is utilized for controlling how an...

5 minutes read.

Tailwind CSS Align Content

In Tailwind CSS, this class accepts a wide range of values. It's a replacement for the CSS Align Content feature. This class is used to modify the flex-wrap property's behavior....

5 minutes read.

Tailwind CSS Grid Auto Flow

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It is a CSS alternative. The grid-auto-flow property is used in Tailwind...

4 minutes read.

Tailwind CSS Overflow

The overflow class acknowledges more than one value in Tailwind CSS. It is an option in contrast to the CSS Overflow property. This overflow is for controlling how element content...

9 minutes read.

Tailwind CSS Margin

The margin class accepts a large number of values, and all of the properties are covered in the same way they are in the class form. It's a replacement for...

6 minutes read.

Tailwind CSS Gap

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It's a replacement for the CSS gap attribute. This class is used...

4 minutes read.

Tailwind CSS Height

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS height property. This class is used...

4 minutes read.

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...

4 minutes read.

Tailwind CSS Place Content

This class accepts a wide range of values. It's a replacement for the CSS Place Content property. This class is used to manage how information is justified while still being...

5 minutes read.

Tailwind CSS Justify Self

The class form goes over the various properties. It's a replacement for the CSS justify-self attribute. This class is used to describe the alignment of content’s position in a CSS...

4 minutes read.

Tailwind CSS Box Shadow

The Tailwind CSS Box Shadow class accepts a lot of value, and all of the properties are covered in class form. We may control the box-shadow of an element by...

2 minutes read.

Tailwind CSS Space Between

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Space Between property....

4 minutes read.

Tailwind CSS tutorial

Tailwind CSS can be utilized to make sites in the quickest and the least demanding way. Tailwind CSS is the most famous utility-first CSS structure on the planet for quickly...

4 minutes read.

Tailwind CSS Grid Template Rows

In tailwind CSS, this class accepts multiple values and all properties are covered in class form. It's the CSS grid-template-row property's replacement. It is used to set the number of...

2 minutes read.

Tailwind CSS Align Self

This class accepts a wide range of values. It's a replacement for the CSS Align Self attribute. This class is used to control how a flex or grid item is...

4 minutes read.

Tailwind CSS Stroke

This class accepts a lot of value, and all of the properties are covered in class form. It's the stroke class that goes on top of the SVG element. Stroke...

2 minutes read.

Tailwind CSS Max-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS max-width property. This...

3 minutes read.

Tailwind CSS Order

One of the best features of Tailwind CSS is the Order class, which allows us to order flex and grid objects according to our needs. There are several different order...

2 minutes read.