<div class="container">
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img1">
    <p>Fill</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img2">
    <p>Contain</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img3">
    <p>Cover</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img4">
    <p>None</p>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

body {
  background-color: #ddd;
  font-family: "Poppins", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.container div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

img {
  height: 300px;
  width: 300px;
  background-color: red;
}

p{
  font-size: 20px;
}

#img1 {
  object-fit: fill;
}

#img2 {
  object-fit: contain;
}

#img3 {
  object-fit: cover;
}

#img4 {
  object-fit: none;
}