Object Fit
- Ui Elements
- Object Fit
Object Fit Contain
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Cover
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="object-cover border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Fill
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="object-fill border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Scale Down
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="object-scale-down border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit None
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="object-none border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain (SM -responsive)
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="sm:object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain (MD -responsive)
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="md:object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain (LG -responsive)
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="lg:object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain (XL -responsive)
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="xl:object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain (XXL -responsive)
<div className="box-body ">
<img src="../../../assets/images/media/media-28.jpg"
className="xxl:object-contain border dark:border-defaultborder/10 !rounded-md" alt="..." />
</div>Object Fit Contain Video
<div className="box-body object-fit-container">
<video src="../../../assets/video/1.mp4" className="object-contain
!rounded-md border dark:border-defaultborder/10" autoPlay loop muted>
</video>
</div>Object Fit Cover Video
<div className="box-body object-fit-container">
<video src="../../../assets/video/1.mp4" className="object-cover
!rounded-md border dark:border-defaultborder/10" autoPlay loop muted>
</video>
</div>Object Fit Fill Video
<div className="box-body object-fit-container">
<video src="../../../assets/video/1.mp4" className="object-fill !rounded-md
border dark:border-defaultborder/10" autoPlay loop muted></video></div>Object Fit Scale Video
<div className="box-body object-fit-container">
<video src="../../../assets/video/1.mp4" className="object-scale-down
!rounded-md border dark:border-defaultborder/10" autoPlay loop muted>
</video>
</div>Object Fit None Video
<div className="box-body object-fit-container">
<video src="../../../assets/video/1.mp4" className="object-none
!rounded-md border dark:border-defaultborder/10" autoPlay loop muted>
</video>
</div>