Brain hurting - help with image re-sizing please

Bootstrap Studio Help
1

Hi everyone. So, it’s Friday afternoon and my brain is hurting. I have searched the forum and found various things that don’t quite answer my question, so here goes:

I am using a Row with 3x Columns, each Column has a Card component with an Image in it, then a Card Body component with text and a Div below with a Button that links off to another page. In this arrangement the columns (and therefore images) scale perfectly on different screen sizes.

For mobile users, I want to make the image a link too, so they can just tap the image. So, I delete the existing image and drag a Link in to the Card, then drag an Image in to the Link. However, the image is now HUGE and does not scale with the column any more.

I guess I am missing a setting on the Link to make it stay contained within the column width… but I cannot see what I am missing.

Can someone help me out please? Oh, and have a great weekend everyone :+1:

2

OK, moment of clarity here. When the image is just inside the Card it does not have to be Responsive, it re-sizes automatically. However, when placed into the Link you need to then make the Image responsive.

Problem solved. :upside_down_face:

3

Hello,
Personally, I use the standard stretched-link class.
With this class, the complete card, image and text zone activate the link.

<div class="col">
  <div class="card bg-body-secondary">
    <img class="card-img-top w-100 d-block" src="image.png" />
    <div class="card-body text-center">
      <a class="btn btn-primary btn-sm stretched-link" role="button" href="https://page.html" target="_blank">Try it Yourself</a>
    </div>
  </div>
</div>