responsive image with object-fit and object-position

In this example below you will see how to do a responsive image with object-fit and object-position with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Fuminori Mori, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Fuminori Mori ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>responsive image with object-fit and object-position</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="img-wrap">
        <img src="https://dummyimage.com/600x400/000/fff" alt="">
      </div>
    </div>
    <div class="col-sm">
      <div class="img-wrap">
        <img src="https://dummyimage.com/400x600/000/fff" alt="">
      </div>
    </div>
    <div class="col-sm">
      <div class="img-wrap"></div>
        <img src="https://dummyimage.com/600x600/000/fff" alt="">
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/moonglows76/responsive-image-with-object-fit-and-object-position-XqwYWX */
.img-wrap {
  position: relative;
  padding-top: 100%;
  background-color: gray;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
  font-family: 'object-fit: contain; object-position: center center;';
}


/*Downloaded from https://www.codeseek.co/moonglows76/responsive-image-with-object-fit-and-object-position-XqwYWX */
$(function () {
  objectFitImages()
});

Comments