Why my image doesn't go on height on mobile?

Question

I would the image on desktop to stay the same, but on mobile to be bigger on height. What should i change in the code ? I'm using Bootstrap 5 aswell.

<div class="container">
        <div class="row">
            <div class="col-12">
                <img src="/images/section1/home-image.jpg" class="img-fluid" id="img1" alt="man on boat">
                <img src="/images/section1/home-logo.png" class="img-fluid" id="img2" alt="logo Seafarer">
            </div>
        </div>
    </div>

#section1 {
position:relative;

}

#img2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Answer 1

Here you go...

I think this is impossible to achieve with Bootstrap. I would use @media query if I were you.

Add this to your CSS:

@media only screen and (max-width: 575px) {
   .col-12 {
      height: 500px; // Adjust the height
   }

   #img1 {
      object-fit: cover;
      height: 100%;
   }
}

It's important to add object-fit: cover; otherwise your image will be screwed. Try to remove this line to see what I'm talking about.

Let me know if this is helpful.