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="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Cover
Use class .object-cover for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="object-cover border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Fill
Use class .object-fill for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="object-fill border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Scale
Use class .object-scale-down for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="object-scale-down border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit None
Use class .object-none for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="object-none border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Conatin (Responsive - sm)
Use class .sm:object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="sm:object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Conatin (Responsive - md)
Use class .md:object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="md:object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Conatin (Responsive - lg)
Use class .lg:object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="lg:object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Conatin (Responsive - xl)
Use class .xl:object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="xl:object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Conatin (Responsive - XXl)
Use class .xxl-object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<img src="assets/images/media/1.webp" class="xxl:object-contain border border-bordercolor rounded-xl size-72" alt="...">
</div>
Object Fit Contain Vidio
Use class .object-contain for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<video src="assets/images/media/video1.mp4" class="object-contain border border-bordercolor rounded-xl size-72" autoplay loop muted></video>
</div>
Object Fit Cover Vidio
Use class .object-cover for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<video src="assets/images/media/video1.mp4" class="object-cover border border-bordercolor rounded-xl size-72" autoplay loop muted></video>
</div>
Object Fit Fill Vidio
Use class .object-fill for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<video src="assets/images/media/video1.mp4" class="object-fill border border-bordercolor rounded-xl size-72" autoplay loop muted></video>
</div>
Object Fit Scale Vidio
Use class .object-scale-down for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<video src="assets/images/media/video1.mp4" class="object-scale-down border border-bordercolor rounded-xl size-72" autoplay loop muted></video>
</div>
Object Fit None Vidio
Use class .object-none for get desire heading.
<div class="p-7.5 flex items-center justify-center">
<video src="assets/images/media/video1.mp4" class="object-none border border-bordercolor rounded-xl size-72" autoplay loop muted></video>
</div>