Last updated 3 years ago
Way 1
Margin-auto & position absolute with top, bottom, left, and right 0
Way 2
flex justify-center items-center
Can set w-64 on outer div or make it adapt
Max Img/Video based on height with cutting off?
<div className="h-24"> <img className="object-cover w-full h-full" src={...} /> </div>
<div className="bg-blue-300 relative" style={{ width: "100%", paddingBottom: "100%" }} /* 56.25% for 9/16 ratio */ > <img src={img} className="absolute object-cover w-full h-full" /> </div>