CODEWITHSUNDEEP
htmlimagecssresponsivecss-grid
Bart
Bart

Reputation: 11

Get image to cover div while keeping aspect ratio, without using css background image

I created a grid using CSS grid. For my first version I used [background-size:cover;] to fit the css linked background image to the divs.

To make life easier (but maybe also harder) I now want to make the same thing but have the image linked in the html.The problem I'm running into is that I can either size the image responsive in the width or the height. Never both.

I need the image to cover the div, resize from the center outwards and keep aspect ratio. The blue background color of the div should never be shown.

If possible I would like to be able to do this without using Javascript if possible.

I hope this makes sense. Thanks in advance.

<html>
  <head>
    <title>home test 3</title>

      <style>

        .wrapper{
          display:grid;
          grid-template-columns:repeat(4, 1fr);
          grid-auto-rows:minmax(250px, auto);
          grid-gap:1em;
          justify-items:stretch;
          align-items:stretch;
          margin-bottom:1em;
        }

        .bannerbox{
          position: relative;
          background-color:blue;
          overflow:hidden;
          position:relative;
          width:100%;
          height:100%;
        }

      .object-fit_cover {
            position: absolute;
            object-fit: cover;
      }

      .box0{
            grid-column:1/5;
          }

          .box1{
            grid-column:1/4;
            grid-row:1/3;
          }


        .bannerbox span {
          position:absolute;
          width:100%;
          height:100%;
          top:0;
          left:0;
        }

        /*responsive code css bart*/
        @media screen and (max-width: 767px){
          .wrapper {
            display:grid;
            grid-template-columns:100%;
            grid-template-columns:repeat(1);
            grid-auto-rows:minmax(1);
            justify-items:stretch;
            align-items:stretch;
          }

          .box1 {
            grid-template-columns:100%;
            grid-column:1;
            grid-row:1;
          }
        }
    </style>
  </head>

    <body>

        <div class="wrapper">
          <div class="bannerbox box1">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box2">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box3">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>
        </div>

    </body>
  </html>

Upvotes: 1

Views: 709

Answers (2)

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

You have to add to .object-fit_cover width: 100%; height: 100%;.

That the img take width and the height of the parent and it will respect the Aspect ratio. 

.wrapper{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(250px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  margin-bottom:1em;
}

.bannerbox{
  position: relative;
  background-color:blue;
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.object-fit_cover {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;

}

.box0{
    grid-column:1/5;
  }

  .box1{
    grid-column:1/4;
    grid-row:1/3;
  }


.bannerbox span {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

/*responsive code css bart*/
@media screen and (max-width: 767px){
  .wrapper {
    display:grid;
    grid-template-columns:100%;
    grid-template-columns:repeat(1);
    grid-auto-rows:minmax(1);
    justify-items:stretch;
    align-items:stretch;
  }

  .box1 {
    grid-template-columns:100%;
    grid-column:1;
    grid-row:1;
  }
}
<div class="wrapper">
          <div class="bannerbox box1">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box2">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box3">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>
</div>

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Here you can open the GitHub page and read the documentation.

https://github.com/jonom/jquery-focuspoint

Here also the playground tool where you can put the image and focus on it to see how it looks.

https://jonom.github.io/jquery-focuspoint/demos/helper/index.html

Upvotes: 1

Taha Paksu
Taha Paksu

Reputation: 15616

Add this to the .object-fit_cover class:

object-position: 50% 50%; 
width: 100%; 
height: 100%;

This resizes the image to fit its container, then object fit will take care of the image filling, and object position will center the image in it's img container.

Upvotes: 0

Related Questions