.wrapper { height: 200px; display: flex; gap: 20px; } .box { border: 5px solid #000; } .box img { width: 100%; height: 100%; } .box1 img { object-fit: cover; } .box2 img { object-fit: contain; } .box3 img { object-fit: fill; }
<div class="wrapper"> <div class="box box1"><img src="balloon.jpg" alt="a balloon"></div> <div class="box box2"><img src="balloon.jpg" alt="a balloon"></div> <div class="box box3"><img src="balloon.jpg" alt="a balloon"></div> </div>
