Trouble with Bootstrap 5 Padding Distorting the Aspect Ratio of Image Collection

I am struggling to manage three images in a layout where they span one row and two columns (please refer to the image). While I can make it look perfect at one screen resolution, the ratio of the images becomes distorted when viewed in other screen sizes due to the fixed padding.

Code:

<section>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-5 text-center">
          <img class="img-fluid ratio ratio-1x1" src="/assets/mood1-8dc4fbf7f86401c523a66983158d7366ce7b41c40b9b568c9a79f2455ae983f4.png">
        </div>
        <div class="col-md-5 d-flex flex-column">
          <img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9" src="/assets/mood2-6b77bce1c8930fd5638d4d982b0c01b357dc38d6212588db2ef12ef67dc8f0e4.png">
          <img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9" src="/assets/mood3-1baca87fe953122237237cbe216e5574d0b6b8b0af20b14057c93281f10d426b.png">
        </div>
      </div>    
    </div>
  </section>

XXL:

https://i.sstatic.net/xoOjv.jpg

Notice how the top and bottom of the images in both columns align perfectly.

Medium:

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

Observe how the bottom no longer aligns. The padding is not responsive, causing the ratios to be thrown off. Any suggestions on how to tackle this issue more effectively?

htmlcssbootstrap-5responsiveness

Answer №1

Try adding h-100 to your image for better results.

You can also utilize bootstrap gutters by using gx-3 to customize the spacing according to your requirements.

Check out the outcome below.

https://i.sstatic.net/RiWvC.jpg

Expand the snippet to view the final result

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section>
    <div class="container">
      <div class="row justify-content-center gx-3">
        <div class="col-5 text-center">
          <img class="img-fluid ratio ratio-1x1 h-100" src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
        </div>
        <div class="col-md-5 d-flex flex-column">
          <img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9 h-100" src="https://apprendre-la-photo.fr/wp-content/uploads/2018/07/photo-vitesse-obturation-elevee_laurent-breillat-1200x900.jpg">
          <img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9 h-100" src="https://www.designer.io/wp-content/uploads/2019/10/1-1024x698.png">
        </div>
      </div>    
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc8d3ccd3ce">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

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

What is the solution to fixing the error message "SyntaxError: missing ) after argument list" in JavaScript?

I wrote some code in HTML/JavaScript/PHP, and in the 3rd echo statement, I added a button that calls the deleteAttribute() function when clicked. However, I encountered an error at the 3rd echo statement with (type = "button"): "Uncaug ...

javascriptphphtml

How to Round Decimals in DataTables

I am encountering an issue with my data table's footer, which is supposed to display the sum of each column. However, while the values within the table are rounded to two decimal places, the values in the footer do not always adhere to this formatting ...

javascripthtmldatatable

Can the navbar hamburger in Bootstrap be displayed at a screen size of 992px?

How can I display the bootstrap navbar Hamburger at md(992px) Screen? Here is the code snippet I am currently using: https://i.sstatic.net/OqBTQ.png Any suggestions on what steps I should take? ...

htmlcssbootstrap-4

The HTML2Pdf content is spilling over the edge of the page

I am attempting to create a PDF from an HTML File using the HTML2PDF library. Here is my HTML code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"> <table width="968" ...

phphtmlcsshtml2pdf

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

Contrasting results when logging an element in Chrome versus IE

Running the script below in Internet Explorer gives the expected output for console.log(target_el): <div class="hidden"></div> However, when run in Chrome, the output changes to: <div class="visible"></div> To add a humorous twi ...

javascripthtml

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Creating a Dropdown Menu with an IEnumerable SelectList

I'm encountering an issue when trying to choose an item from my dropdown list and submit it. An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but wasn't handled in user code. Additional informat ...

c#htmlasp.netasp.net-mvc

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

Tips for eliminating the draggable item's shadow in Angular

Is there a way to remove the shadow seen under the backdrop when dragging an item in the Bootstrap modal dialog? In the image provided, I am trying to drag the "Personal Details" button..https://i.stack.imgur.com/uSNWD.png ...

cssangulardrag-and-dropng-bootstrap-modal

Tips on Including a Custom Header in an Ajax Request for a Cross-Domain JsonP Call

Is there a way to add a custom header using an ajax call in jQuery for a cross-domain JSONP call? I am making a web service call in an HTML page using Ajax cross-domain call. I am currently using JSONP and now need to send some parameters in the header. ...

jqueryhtmlajaxjsonp

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss

Initiate the countdown when the button is pushed

Recently ran into an issue where a button triggers a command to a Perl script, causing the page to continuously load for 60 seconds. To provide users with transparency on when the Perl script will be finished running, I implemented a JavaScript countdown t ...

phpjavascripthtmlcountdown

What happens when a CSS module is exported as an empty object?

My go-to for creating projects is using TypeScript and create-react-app. I recently incorporated the typings-for-css-modules-loader and dabbled in css-modules as well. { test: /\.css$/, use: [ require.resolve('style-loader'), { ...

javascriptcssreactjstypescript

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Trying to utilize parseInt to ascertain if a span element is greater than or equal to 1 within my Google Chrome Extension. Attempting to monitor this "0" for changes and trigger a specific URL upon change - Refer to the Image View of the "inspect" option ...

javascripthtmlgoogle-chromeparseint

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

javascripthtmlcssreactjsmaterial-ui

Challenges in aligning images side by side within an XSLT document

My XML file is currently being transformed using XSLT to display tables, but I would like these tables to be displayed next to each other in rows of three columns. However, the current output shows them displaying one after another vertically. Here's ...

htmlcssxmlxslt

The table is not displaying the CSS class as intended

I need to modify the behavior of a table so that upon clicking on a value, a specific class is set and the user is redirected to a particular page. The structure of the table is as follows: <?php // Determine the file name based on content type if( ...

phphtmlcss