The Bootstrap row has surpassed the maximum height of the container-fluid

I've encountered a problem while working with the bootstrap grid system (Version v4.5.2). I have set a max-height of 50vh on a container-fluid, which is working fine. However, when I add a row with 2 columns to the container, the images within the row do not resize properly. The row ends up exceeding the max-height of its parent container and adjusts to the image height.

Even after trying to use the "img-fluid" class, the images still do not resize as expected. I have provided links to the dev-tool images for reference.

Here is the parent container-fluid image

And here is the child-row that exceeds the container's max-height

I am confused about where I might be going wrong. Below is the code I am working with:

HTML

<div class="container-fluid view ">
    <div class="row h-100 d-flex align-items-center no-gutters">
        <div class="col-md-6 pl-5">
            <h1>Just a simple Heading that should align in the middle</h1>
        </div>
         <div class="col-md-6 d-flex align-items-center img-fluid flex-nowrap overflow-hidden heroImages">
                <img class="img-fluid" src="https://picsum.photos/600">
                <img src="https://picsum.photos/600">
        </div>
    </div>

CSS

html,header{
  height: 100%!important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  color:black;
}

.view {
  max-height: 300px;
 /* max-height: 50vh; */
}

body {
  height: 100% !important;
  padding-top: 55px !important;
  background-color: rgba(255, 255, 255, 0.84) !important;
}

Answer №1

If you want to enhance the existing code, consider including the following adjustments:

.heroImages{
   height: 300px;
   display:flex;
  }
.heroImages img{
  display:block;
  height:100%;
  }

Ensure that the parent div has a specified height and that the images within it are displayed as block elements.

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

Leveraging the sibling combinator for altering the class of a sibling SVG element with the assistance of Material

I have created an SVG picture that I am trying to animate. Behind the elements I want to animate on mouse hover, I have added transparent rectangles. The hover effect works well on these elements as the cursor changes to pointer. However, when I attempt t ...

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

Customize the Vuetify 2.0 sass variable $heading-font-family

I'm currently trying to customize the default variable $heading-font-family in Vuetify 2.0.0-beta.0, but I'm encountering issues with this particular override. Oddly enough, I have been successful in overriding other variables such as $body-font- ...

How to embed HTML code within PHP using a conditional variable

I've encountered an issue with a PHP code that sends emails containing HTML templates. The HTML template includes PHP variables such as Name and Email. <strong>Name: {name} </strong> As the email template is lengthy, I have included ...

AJAX: Bringing in new content to display beneath the triggering page

Here is the code for my main page: <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> div { width:100%; ...

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

Encountering a 404 error with Django's static files

I am attempting to consolidate all Bootstrap files in my Django project into a single folder and reference them. To achieve this, I have added the following lines to my settings.py file: STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DI ...

Tips for creating a highly adaptable code base- Utilize variables

Can anyone help me optimize this lengthy and cumbersome code in HTML and JS? I want to make it more efficient by using variables instead of repeating the same code over and over. In the HTML, I've used href links to switch between different months, w ...

HTML/CSS: There is a sentence that has no spaces that is exiting outside a div

HTML: <div> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> CSS: div { width: 150px; border: 1px solid blue } DEMO: http://example.com QUESTION: How can we solve this issue? ...

Retrieve the title of the item by selecting it within the h1 tag using Beautiful Soup

import requests from bs4 import BeautifulSoup def fetch_webpage(url): response = requests.get(url) if not response.ok: print('Server Responded: ', response.status_code) else: soup = BeautifulSoup(response.text, 'lxml') ...

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

Unexpected malfunction of Wordpress modals and JavaScript stopped abruptly

I previously had a website built with pure JS and HTML, but decided to transfer it to WordPress. Everything was functioning properly until a few days ago when two of my functions suddenly stopped working. Both functions are supposed to add an "active" clas ...

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Currently, I am working on developing a unique progress bar that resembles a glass orb filling up with liquid. However, due to its rounded shape, the traditional approach of adjusting the height does not produce the desired result (as illustrated in this f ...

Tips for utilizing [ngClass] with various class situations in Angular4

My current div structure is as follows: <div class="class-a" [ngClass]="{'class-b': !person.something}"> However, I now need to add an additional condition... I want the div to have class-a if one condition is met, class-b if another con ...

Padding in Bootstrap rows is not uniform

My grid template has 3 columns, but the first row in one of the columns is slightly pushed. Which CSS property should I adjust to fix this issue? Using Bootstrap framework.https://i.sstatic.net/CLSYK.png <div class="col"> <div class="col-sm"> ...

How can you gradually make a CSS border disappear?

Can an element's border fade away with the use of JavaScript only, without relying on jQuery for animation? We are currently working with Sencha and it seems that ExtJS only allows for animating element size and position. While CSS3 offers helpful ani ...

Using PHPMailer in conjunction with a textarea form and HTML

Currently, I am attempting to piece together code from a PHP tutorial that demonstrates how to create a basic PHPMailer form for sending plain text emails to a mailing list. The simplicity of the form is ideal as it will be used by only a few individuals. ...