Populate the row with an image while maintaining its size

I have encountered an issue with containing images within a Bootstrap row. When I insert an image, it does not stay contained within the row and instead overflows causing scrollbars to appear.

My goal is to have the image fit seamlessly into the container without any scrolling when resizing the image.

Here is the correct behavior without any additional elements in the row:

https://i.sstatic.net/ibyj3.png

<div class="container-fluid">
    <div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">

        <div class="col" style="background-color: rgba(0,0,0,.03);">

            <div class="d-flex flex-column h-100">


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style=&q...

This is the expected outcome when adding an image:

https://i.sstatic.net/DOaQn.png

<div class="container-fluid">
    <div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">

        <div class="col" style="background-color: rgba(0,0,0,.03);">

            <div class="d-flex flex-column h-100">



                <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
                    <img class="img-responsive w-100 h-100  px-0 rounded"  src=&quo...
htmlcssimagefillresponsive-images

Answer №1

One clever trick is to set the image height to 0 and the min-height to 100%

style="height:0;min-height:100%;"
or with a custom class (recommended)

Here's an example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row justify-content-center min-vh-100 mh-100 pt-3 ps-3 pb-3">
    <div class="col" style="background-color: rgba(0,0,0,.03);">
      <div class="d-flex flex-column h-100 ">
        <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
          <img class="img-responsive   px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
        </div>
        <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
          <img class="img-responsive    px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
        </div>
      </div>
    </div>
    <div class="col" style="background-color: rgba(0,0,0,.03);">
      <div class="d-flex flex-column h-100">
        <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
          <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
            <div class="align-self-center mx-auto">
              <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                <i class="fa fa-plus text-dark"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
          <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
            <div class="align-self-center mx-auto">
              <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                <i class="fa fa-plus text-dark"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Another option is to set a max-height on the containers

Here's another example:

.max-vh-100{max-height:calc(100vh - 2em);}/* takes into account : pt-3 p-s3 pb-3 that could be turned into p-3 */
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row justify-content-center min-vh-100 p-3">
    <div class="col" style="background-color: rgba(0,0,0,.03);">
      <div class="d-flex flex-column h-100 max-vh-100">

        <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
          <img class="img-responsive w-100 h-100  px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
        </div>
        <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
          <img class="img-responsive w-100 h-100  px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
        </div>
      </div>
    </div>
    <div class="col" style="background-color: rgba(0,0,0,.03);">
      <div class="d-flex flex-column h-100 max-vh-100">


        <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
          <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
            <div class="align-self-center mx-auto">
              <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button>
            </div>
          </div>
        </div>


        <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
          <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
            <div class="align-self-center mx-auto">
              <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.max-vh-100{max-height:calc(100vh - 2em);}
takes into account : pt-3 ps-3 pb-3 that could be turned into p-3

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

Expanding Iframes in Joomla K2

Sorry if this question has been asked before, but I'm really struggling here... Here is the URL where the issue is happening: I am trying to embed an iframe from one of my client's websites onto my own personal website. Currently, I have the i ...

htmlcssiframejoomla3.0

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

javascriptjqueryhtmlcss

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

I utilized the angular 6 datatable to paginate the data in a table format. https://www.npmjs.com/package/angular-6-datatable Everything is functioning properly, but I am struggling with styling the footer of mfBootstrapPaginator. https://i.sstatic.net/i ...

htmlcssangulartwitter-bootstrapdatatable

Can you help me identify the reason behind a page displaying a temporary horizontal scrollbar?

While browsing the following page in Google Chrome: A horizontal scrollbar appears briefly during page load. It seems that something hidden below the fold is causing this issue, but I haven't been able to identify the exact cause. EDIT:- Watch a v ...

htmlgoogle-chromewebkitrender

Altering the ASP DropDownList's background color solely with CSS modifications

Is there a way to change the background colors of dropdownlists in my C# web app using CSS instead of specifying each one individually? In simpler terms, I'm trying to avoid having to write out code like this for multiple dropdowns: private void For ...

c#cssasp.netdropdownbox

Creating an anchor element with text and a bootstrap icon involves using the appropriate HTML structure and

I am trying to figure out how to create an element that includes both text and a Bootstrap icon. Here is the HTML code: <a> Edit <i class="icon-pencil" /> </a> Can anyone help me understand how to select this DOM element using jQuer ...

jqueryhtml

Assigning a height of 100% to a div element results in the appearance of

In a div within the body, there are only 3 lines of text. The background color was only filling up to those 3 lines of text. To make the color fill up the entire vertical space of the browser, I adjusted the CSS height properties of html & body to be ...

htmlcss

How can I input text into separate tabs using a specific method?

I've been struggling with this issue for a while now and here's the code I have so far: <html> <head> <script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></scr ...

javascripthtmlcsstabslogic

What is the best way to retain data after clicking a button?

I am facing an issue where I need to figure out how to add information to a new page when a button is clicked. For example, let's say I have an "add to cart" button and upon clicking it, I want to store some data. How can I achieve this functionality? ...

javascripthtmlcss

Obtain the location of the image source from a text file within an HTML document

I need to create a slideshow displaying a sequence of images. The path to these images will be stored in a text file. How can I read the image paths from the text file? Currently, I have hardcoded code like the example below: <div class="mySlides fade" ...

javascripthtml

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Is the jQuery popup malfunctioning? It appears to be stuck within a div

Currently, I am in the process of developing a website at and I am facing an issue with the hover type menu. Whenever I click on the arrows next to the logo, instead of fully opening up, the menu seems to be getting stuck and is not expanding entirely. I ...

jquerycss

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

htmlcss

A pair of inline divs (personal computer) set with vertical alignment in the center on media sources

Struggling to create a topbar for a webpage with 2 inline divs and having difficulty centering them vertically on media screens. (Paint) example of what I am trying to achieve Currently using float: left; to keep the divs inline along with display: inlin ...

htmlcsshtml-lists

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

javascripthtmlangular

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

jquerycssanythingslider

The arrangement of columns and floating images along with the surrounding white spaces

There are 3 columns, each sized at 33% with images of varying heights inside. When viewed on a device the size of an iPad, I want to change the column sizes to be 50%. However, when I do this, the third column appears in the middle bottom of the top two co ...

htmlimageresponsive-designcss-floatgallery

Creating an unordered list (ul) with list items (li) that extend the full width

Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a nav hover bar. .dropdown-b ...

htmlcss

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

I have encountered an issue where this code functions properly in JSFiddle, but not when run locally in Chrome or Firefox. I suspect there may be an error in how the CSS or JavaScript files are being linked. In the Firefox console, I am receiving an error ...

javascriptjqueryhtmlcssjsfiddle