htmlcssbootstrap-4flexboxbootstrap-5

Bootstrap Image does not respect parent flex size

I am trying to position an image, heading, a button on top of another image. The problem is that on small screen size, the small image does not resize and it goes beyond the holding image background. Below is what I tried and I am also providing a link i order to see what happens o small screens Link

<body>
    <div class="container-fluid d-flex d-lg-flex justify-content-start align-items-center justify-content-lg-start align-items-lg-center" style="position: relative;">
        <div class="row">
            <div class="col-md-12"><img class="img-fluid" src="https://i.ibb.co/kHRZWBf/div-comp-Content-Image-Slideshow-image-Slide.png" /></div>
        </div>
        <div style="position: absolute;"><img class="img-fluid" src="https://i.ibb.co/mS1tN4r/vr-glasses-1.png" />
            <h2>Heading</h2>
          <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
</body>
Solution

  • Hope this works, used Bootstrap v5.3!

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Resize Issue</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        body {
            font-family: system-ui;
            background: black;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container-fluid d-flex d-lg-flex justify-content-start align-items-center justify-content-lg-start align-items-lg-center"
        style="position: relative; aspect-ratio: 16/9; height: auto;">

        <img class="" style=" left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;"
            src="https://i.ibb.co/kHRZWBf/div-comp-Content-Image-Slideshow-image-Slide.png" />

        <div style="position: absolute; top: 20px; left: 20px;">
            <img class="img-fluid" style="aspect-ratio: 1; width: 15vw;"
                src="https://i.ibb.co/mS1tN4r/vr-glasses-1.png" />

            <h2 style="font-size: 5vw;">Heading</h2>

            <button class="btn btn-primary" style="width: 20vw; height: 5vw; font-size: 2vw;"
                type="button">Button</button>
        </div>
    </div>
</body>

</html>