Home > AI > Language > CSS >

object-fit: cover;

How image is scaled in its div

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="parent">
      <img
        src="https://images.unsplash.com/photo-1618510050510-d0903984e131?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
      />
    </div>

    <style>
      .parent {
        perspective: 1000px;
        background: red;
        padding: 2em;
      }

      img {
        width: 100%;
        height: 90px;
        object-fit: cover;
        /* object-position: top left; */
      }
    </style>
  </body>
</html>

Leave a Reply