The Bootstrap image fails to adhere to the size of its parent flex container

I am having trouble positioning an image, heading, and a button on top of another image. The issue arises when viewing the content on small screens as the smaller image fails to resize properly and extends beyond the background of the larger holding image. Below is my attempted solution along with a link for you to see how it behaves on smaller 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>
htmlcssbootstrap-4flexboxbootstrap-5

Answer №1

Successfully implemented Bootstrap v5.3 for this solution!

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

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resolving Image Resize Challenge</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f94899489">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Can you help me figure out how to prevent a button from executing the onclick function of its parent div in this example? <div onclick="$('#extra-info').slideToggle();" class="card card-body item"> <div class="ro ...

javascripthtmljqueryonclick

What about a Material UI-inspired homepage design?

Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...

cssreactjsuser-interfacematerial-uitheming

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...

javascriptjqueryhtmlweather

The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...

htmlcssbootstrap-5font-awesome-5

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

jquerycss

Implement a CSS class specifically for products with low stock within the single product page on WooCommerce

I need some assistance with adding a class to 'Low stock' in the code snippet below, as I am not very familiar with php. My goal is to style the Low Stock text in WooCommerce to appear orange using CSS. function change_stock_text( $availability ...

phpcsswordpresswoocommerceproduct

What are the steps for manually integrating Bootstrap into an Angular project?

I'm currently working on an Angular 5 project within a private domain where I am unable to utilize the npm-install command. As a result, I have manually added Bootstrap's CSS and JS files to my project. I am now unsure how to properly link these ...

angulartwitter-bootstrapangular-ui-bootstrapbootstrap-4angular5

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

javascripthtmlangularjs

Accessing an image from a directory using Javascript

I have a simple question that I need help with. In my code, I currently pull images from a website using this syntax: icon: 'http://i45.tinypic.com/2yua8ns.png'. However, I would like to use something like this instead: icon: '\images/i ...

javascripthtmlcss

What is the best way to switch a single class using jQuery without impacting other elements with the same class

I'm in the process of implementing a commenting system similar to Reddit on my website. Each comment is equipped with a small button in the top right corner that allows users to collapse the comment. To achieve the collapsing effect, I am utilizing j ...

javascriptjqueryhtmlcss

Is there a way to modify the text of image URLs using JavaScript?

My method of replacing a specific word in text works like this: document.body.innerHTML = document.body.innerHTML.replace(/katt/g, "smurf"); However, when I try to replace an image URL in HTML using the same line of code, it doesn't seem to work. H ...

javascripthtmlregexurlreplace

JavaScript recording speed

I am currently working on a project that involves video recording on my website. After creating a canvas and pushing the recorded frames to it, I have encountered an issue. The playback of the video is too fast - a 10-second video plays in around 2 second ...

javascripthtmlangularjsvideorecording

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

javascripthtmlcssimage

JQuery method for altering currentTime's format

I am attempting to showcase the current time and duration of my videos on my website using the format 00:00, but I am having some difficulty... myVideo.on('timeupdate', function() { $('.current').text(myVideo[0].currentTime); $ ...

jqueryhtml

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

React Router version 6.4.5, automatic redirection upon loading the page

Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...

javascripthtmlcssreactjsreact-router

issue with stacking data in Google Charts

Check out my HTML code: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></scri ...

htmlgoogle-visualization

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

htmlcsstwitter-bootstrapcarousel

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

javascriptjqueryhtmlangularjs

Using AngularJs, you can access the document.body.onfocus event within the controller of

I am attempting to detect when the user closes or cancels the File Upload Window <input type="file"> Since there isn't a built-in listener for the close event of the file upload, I am trying to capture it using the document.body.focus event, s ...

javascripthtmlangularjs