object-fit: cover;

object-fit: cover; } example

by Volkan Yılmaz

HTML

<div class="ofc">
<h1>object-fit: cover;</h1>
  <div class="varyok">
    <div class="yok">
      <h2>YOK - 200px</h2>
      <img width="200" height="200" src="https://images.unsplash.com/photo-1606851451856-1079efdf0caf?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
    </div>
    <div class="var">
      <h2>VAR - 200px</h2>
      <img width="200" height="200" src="https://images.unsplash.com/photo-1606851451856-1079efdf0caf?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
    </div>
    <div class="var-top">
      <h2>VAR - 200px - top</h2>
      <img width="200" height="200" src="https://images.unsplash.com/photo-1606851451856-1079efdf0caf?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
    </div>
  </div>
  <div class="orijinal">
    <h2>Orijial</h2>
    <img width="634" height="951" src="https://images.unsplash.com/photo-1606851451856-1079efdf0caf?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
  </div>
</div>

CSS

.var img {
  object-fit: cover;
}

.var-top img {
  object-fit: cover;
  object-position: top;
}

.varyok>div {
  width: 200px;
  display: inline-block;
  margin: 20px 5px;
}

.ofc {
 min-width: 650px;
}

*,
html,
body {
  color: white;
  background-color: #1f2227;
}