How to make bootstrap card card-tall responsive on mobile

Question

so i am using bootstrap cards to display images in a sort of gallery way. I am also using the card-tall to style my images. These images are posters and as you may guess that means they take up a lot of space.

On website this is how it looks:

But on mobile it looks like this:

This is the html for the poster its contained in a div

 <div id = "all" class="photo-grid">
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
       </div>
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster4.jpg)">
       </div>
</div>

and my CSS

* {
  box-sizing: border-box;
}
body {
  background: #fff;
  color: #fff;
  font-family: "Noto Sans", sans-serif;

}
.photo-grid {
  height: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  margin-right: 10%;
  margin-left: 10%;
  margin-bottom: 3rem;
}
.card {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: transform 200ms ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }
  .card-wide {
    grid-column: span 2 / auto;
  }
}



/* import fonts  */ 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); 

/* css variables */ 
@import url(./partials/_variables.css); 

/* import global styling */ 
@import url(./partials/_global.css);

PLEASE HELP!!!

tao · Answer 1 · 2020-05-20T01:41:48.923

There are two major use cases for images in HTML:

background-image - not treated as content, they are rendered within the bounds of the element, without setting its size
regular images: <img>s - they are treated as content and, among others, they set the size of their parent (when not taken out of the flow, using position), which is what you seem to want.

The simplest way to make the element have the exact height to display the image without being cropped is by actually using the background image as an <img>:

<div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
  <img src="./img/portfolio/poster1.jpg">
</div>

... combined with this CSS:

.card-tall img {
  display: inline-block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

Now the image will be there, setting the card's ratio, but what you'll see is still the background-image, because <img>s visibility is hidden - not rendered.

Also note this doesn't add any extra weight to the page. Since the resource is exactly the same, when it loads for background-image it also loads for <img>.

If you only want this behavior on a particular responsiveness interval, wrap the above CSS into the appropriate @media query.

To avoid custom CSS, apply these classes to the <img>:

<img src="./img/portfolio/poster1.jpg"
     class="d-inline-block w-100 h-auto invisible">

The disadvantage is that each (like most Bootstrap utility classes) comes with !important. For responsiveness, if you don't want the images displayed on md and above, use d-md-none class (it's an example, change it to what you need, if: d-sm-none, d-lg-none...).

Side note: you could also add the images programmatically, using this jQuery script:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

See it working:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

.card-tall {
  background-size: contain;
  background-repeat: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/200)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/300)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/300/200)"></div>
    </div>
  </div>
</div>

Add d-md-none to the list of classes if you only want the <img>s to kick in on sm and below.

How to make bootstrap card card-tall responsive on mobile

1 Answers1