Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

I'm facing a challenge in creating a row of 4 images that are responsive and uniform in size, despite being different dimensions (640x799, 640x479, ...). I've attempted to use columns and img-fluid to achieve this, but the shorter images do not fill the column height while the taller ones do. Any guidance or recommended resources would be highly appreciated.

Below is an example of the layout I am currently working with.

html

   <div class="container">
       <div class="row">
          <div class="col">
            <img class="img-fluid">
          </div>
          <div class="col">
            <img class="img-fluid">
          </div>
          .....
       </div>
    </div>
htmlcssbootstrap-4

Answer №1

If you're looking for a quick fix, there are two methods to achieve this. The first and most effective way is to ensure that all your images have the same height and width so they scale uniformly. If this isn't possible, you can try one of these solutions:

Option 1: - Specify the height for each image (this will keep them aligned, but won't make them responsive unless you use media queries in your CSS and adjust the height setting) 

<div class="container">
   <div class="row">
      <div class="class-name">
        <div class="col">
          <img class="img-fluid">
        </div>
        <div class="col">
          <img class="img-fluid">
        </div>
      </div>
      .....
   </div>
</div>

.class-name img {
 height: 500px; 
 width: 100%;
}

Option 2: Add a parent div to the columns and set the height and width of that div. This will allow you to set the height and width of the images to 100%. 

<div class="container">
   <div class="row">
      <div class="col">
        <div class="parent-div>
          <img class="img-fluid">
        </div>
      </div>
      <div class="col">
        <div class="parent-div>
          <img class="img-fluid">
        </div>
      </div>
      .....
   </div>
</div>

.parent-div {
 height: 500px; 
 width: 100%;
}

.parent-div img {
 height: 100%;
 width: 100%;
}

Both options require the use of media queries in CSS to ensure proper scaling on different devices such as tablets or phones.

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

javascript code for subtracting values in arrays

I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...

javascriptphpjqueryhtmlarrays

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

Choose all the inputs with the value attribute specified

How can I select all input textboxes in my form that have the required class and no value using jQuery? Currently, I am using: $('input[value=""]', '.required') The issue I am facing is that even when a user enters a value in the text ...

javascriptjqueryhtml

How can you retrieve input values from a form using a button click but without requiring a

I am facing an issue with the delete button on my form. The form has three buttons - one to edit the form on another page, one to add a value on the existing page, and one to delete a value. While the submit and edit buttons work fine, I am struggling wi ...

phphtmlajax

Update the index of each list object and then add them to the Angular controller

Currently, I am working on integrating Spring with AngularJS. In my setup, I have a Spring controller returning a List object to the Angular controller. When I print the List in the Spring controller console, it appears as follows: [org.com.pro.dto.MyDTO ...

htmlangularjsspring-mvc

Transfer your focus to the following control by pressing the Enter key

I came across a project built on Angular 1.x that allows users to move focus to the next control by pressing the Enter key. 'use strict'; app.directive('setTabEnter', function () { var includeTags = ['INPUT', 'SELEC ...

javascripthtmlangulartypescript

Whenever I press a button, my card holder gradually slides downwards

I'm facing an issue with my code and I'm unsure whether it's related to CSS or JavaScript. Whenever I click the button on my page, my card-container2 moves downward unexpectedly. Here is the snippet of my code: HTML: <div class="car ...

javascripthtmlcss

How can you override the selected classes for menu items in Material-UI using React.js?

Hey there! I'm facing an issue where I can't override the class that displays the correct styling when a menuItem is selected. Below is my code: <MenuItem component={Link} to="/Acceuil" className={{root:classes.menuItem ,selected:cla ...

cssreactjsmaterial-uimenuitemstyling

Strategies for incorporating child element margins within a parent container with overflow scroll

My container has a fixed width causing its children to overflow and require scrolling. Each child element (.box) has a margin-right: 10px. The margin is visible on all elements except the last one, where it is cut off at the edge of the element. I want to ...

htmlcss

Django Ajax button fails to add item on initial click

My Django project features a dynamically rendered table for order items on the Cart page. Each item in the table displays the quantity, product name, total price, and more. To modify the quantity, I've implemented "add" and "subtract" buttons. Below i ...

pythonhtmljquerydjangoajax

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below: /* CSS Styles for the table */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding ...

jqueryhtmlcssangularjstwitter-bootstrap

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

javascripthtmlcssfunction

HTML5 canvas processing causing web worker to run out of memory

Within the Main thread: The source image array is obtained using the getImageData method. It is represented as a uint8ClampedArray to store the image data. Below is the code executed in a web worker: (This operation generates a high-resolution image, but ...

javascripthtmlmultithreadingcanvasweb-worker

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

csslayouthtml

Display of items in a submenu through a drop-down menu when hovering over it

As I work on creating a Navbar with a dropdown menu, I'm encountering an issue where hovering over the main list element displays all the submenu contents at once. No matter what I try in my CSS, including adjusting the positioning of li and ul elemen ...

htmlcsscss-positionnavigationbar

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

javascriptjqueryhtmlcssjquery-mobile

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

htmlcsscss-shapes

Discover the significance of a data attribute's value for effective comparisons

I have a loop that generates random numbers and positions to create 4 answer choices for users. Now, I am trying to determine the value of the clicked button and compare it to the position of the correct answer. However, whenever I try to do this, it retu ...

javascriptjqueryhtml