Object-fit
Object-fit.
Implement object-fit in your CSS to specify how media elements like images and videos should behave, allowing for seamless control over their display and layout.
Object-fitObject-fit
Object Fit Contain
Use class .object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Cover
Use class .object-cover for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="object-cover border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Fill
Use class .object-fill for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="object-fill border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Scale
Use class .object-scale-down for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="object-scale-down border border-border rounded-lg size-72" alt="...">
</div>
Object Fit None
Use class .object-none for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="object-none border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Conatin (Responsive - sm)
Use class .sm:object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="sm:object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Conatin (Responsive - md)
Use class .md:object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="md:object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Conatin (Responsive - lg)
Use class .lg:object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="lg:object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Conatin (Responsive - xl)
Use class .xl:object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="xl:object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Conatin (Responsive - XXl)
Use class .object-xxl-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<img src="assets/images/media/1.jpg" class="xxl:object-contain border border-border rounded-lg size-72" alt="...">
</div>
Object Fit Contain Vidio
Use class .object-contain for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<video src="assets/images/media/transaction.mp4" class="object-contain border border-border rounded-lg size-72" autoplay loop muted></video>
</div>
Object Fit Cover Vidio
Use class .object-cover for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<video src="assets/images/media/transaction.mp4" class="object-cover border border-border rounded-lg size-72" autoplay loop muted></video>
</div>
Object Fit Fill Vidio
Use class .object-fill for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<video src="assets/images/media/transaction.mp4" class="object-fill border border-border rounded-lg size-72" autoplay loop muted></video>
</div>
Object Fit Scale Vidio
Use class .object-scale-down for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<video src="assets/images/media/transaction.mp4" class="object-scale-down border border-border rounded-lg size-72" autoplay loop muted></video>
</div>
Object Fit None Vidio
Use class .object-none for get desire heading.
<div class="sm:p-7.5 p-4 flex items-center justify-center">
<video src="assets/images/media/transaction.mp4" class="object-none border border-border rounded-lg size-72" autoplay loop muted></video>
</div>