The excessive height of a Bootstrap 5 row is causing the image to overflow beyond the container

I am currently working on setting a maximum height for a banner I am designing in bootstrap5. Here is my code snippet:

.banner {
    background: red;
    max-height: 50px;
}
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504f504c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3ecf3ef">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
 
    <div class="container d-flex banner">
        
            <div class="col-2">
                <img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
            </div>
            
            <div class="col-10">
                This is some text for the right hand side of the banner
            </div>

    </div>

</body>

My query is why the image is breaking out of the banner instead of resizing proportionally as expected when using img-fluid. What could be causing this issue? Your insights would be appreciated!

htmlcssbootstrap-5

Answer №1

The "img-fluid" class in your code only applies "max-width:100%" and "height:auto". If your content is restricted by height rather than width, you should also include "max-height:100%".

.banner {
    background: red;
    max-height: 50px;
}
.img-fluid{
    max-height: 100%;
}
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5b5d4e5f6f1a011e011d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa0bfa3">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
 
    <div class="container d-flex banner">
        
            <div class="col-2">
                <img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
            </div>
            
            <div class="col-10">
                This is some text for the right hand side of the banner
            </div>

    </div>

</body>

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

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

htmlcssasp.net

"Oops! Looks like there's a reference error - the function you're trying

Javascript: function insertSmiley(a) { var $img = $(a).children('img'); $("#message").insertAtCursor(($("#message").data("wbb").options.bbmode) ? $("#message").data("wbb").toBB($(a)): $(a).html()); return false; } HTML: <a href= ...

javascriptjqueryhtml

The presence of the StickyHeader Row is causing an obstruction in the drop down list view

I have successfully made the row header of the Material UI Table component sticky by utilizing the stickyHeader attribute. <Table stickyHeader className={classes.table}></Table> Above this table, there are two drop-downs that are created using ...

cssreactjsmaterial-uistickyreact-select

Interactive JavaScript Slider for Customizing Selection

Recently, I came across a range slider and I am trying to make it more dynamic. The current JavaScript code has hardcoded references to specific HTML elements, and I want to have multiple sliders on my HTML page, each functioning independently. The code sn ...

javascripthtmljquerycssrangeslider

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

I am currently working on a project where I need to extract the content from a hidden iframe and display it as HTML in a div every time the iframe changes its loading state. The goal is for it to appear as if the page is being redirected and downloading it ...

javascriptjqueryhtmliframe

Glitches of white light during loading screens on your Prestashop website

There's a strange occurrence on the website where it flashes white DURING (not just at the start) every time a page loads. Initially, the page seems to load smoothly and almost completely, but then there is a sudden flash before all elements are disp ...

htmlcssprestashop

The Bootstrap toggler is failing to conceal

Currently, I am working on a website utilizing Bootstrap 5. The issue arises with the navbar - it successfully displays the navigation when in a responsive viewport and the toggler icon is clicked. However, upon clicking the toggler icon again, the navigat ...

javascripthtmlnavbarbootstrap-5

Is it possible to incorporate a 960 grid system into a div container?

Can I contain an entire 960 grid within a div on my webpage? I am looking to create a page wider than 960px, and considering placing sidebars outside of the 960 grid while having it manage the central column. ...

htmlcssgrid960.gs

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

A single list is utilized by multiple HTML5 selects

If I have 10 fields in a form, each requiring a select option from the year 1950 to 2017, can I create one list from that range and have each select reference it? Or do I need to make ten separate lists for each select? Edit: An example could be the birth ...

javascripthtml

``Incorporating best practices: Setting the height of the parent container equal to the height of

When designing a container, is it considered beneficial to assign each child within the container its own height property, even if the parent container has already been allocated a specific height? If not, are there alternate methods available for transfer ...

cssheightparent-child

Removing specific text from a textarea containing a vast quantity of information

I developed a simple XML formatter using HTML and Javascript. I am looking to incorporate a delete feature into it. Essentially, I want the ability to remove an entry without affecting any other data. <contact <!--Jane Smith--> first_name="Jane" ...

javascripthtml

Having trouble getting the img file to show up in the img tag - the src URL is not updating

<div class="col-lg-3 col-md-4 pl-md-1"> <label class="ORGAd16-preview"> input type='file' name="modelvariant_file" id="imageUpload" accept=".png, .jpg, .jpeg" > <img id="ima ...

htmljquerylaravel

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

javascriptjqueryhtmlcss

Switching between a secondary menu using ClassieJS or jQuery?

Currently, the code is configured to toggle the same menu for every icon. To see my current progress, you can check out this fiddle: http://jsfiddle.net/2Lyttauv/ My goal is to have a unique menu for each individual icon. I began by creating the followi ...

javascriptjqueryhtmlcssclassiejs

What is the best way for me to insert a paragraph between two lists?

Is it possible to insert a paragraph in between lists even though it's not allowed? Here is an example of the code: <ol> <li>One</li> <p>Paragraph 1</p> <li>Two</li> <p>Paragraph 2</p ...

html

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

Updating the UI in Angular for keyboard events is not working as expected

Looking to update the page based on keyboard events. I've connected the keyboard event using $window.document.onkeydown. (I understand it's not ideal, but it should still work) However, despite changing the model, I'm not seeing any updates ...

htmlangularjskeyboard-events

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss