Ensure consistency in the heights of div elements, even when the images contained within have varying heights

I created a bootstrap webpage with a row of DIVs, each containing an image. As I resize the browser window, I noticed that the height of the first two DIVs remains consistent, but the third div's height varies because the image is only 50 pixels high.

<div class="row">
    <div class="col1 col-md-4">
        <img src="image160x160.jpg" alt="">
    </div>

    <div class="col2 col-md-4">
        <img src="image160x160.jpg" alt="">
    </div>

    <div class="col3 col-md-4">
        <img src="image160x50.jpg" alt="">
    </div>
</div>

Is there a way to ensure that all DIVs maintain the same height regardless of screen resolution?

htmlcss

Answer №1

To create a flex-container with row, simply add the following CSS code:

* {
  box-sizing:border-box;
}
html,body{ 
  margin:0;
}
img {
  display: block;
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.col {
  margin: 8px;
  border: 4px solid darkgoldenrod;
}
<div class="row">
  <div class="col col1">
     <img src="http://via.placeholder.com/160x160"/>
  </div>
  <div class="col col2">
    <img src="http://via.placeholder.com/160x160"/>
  </div>
  <div class="col col3">
    <img src="http://via.placeholder.com/160x50"/> 
  </div>
</div>

Keep in mind to rename the classnames row and col to avoid conflicts with bootstrap styles if you decide to use this method.

Answer №2

To ensure a fixed height on the div, you can set height:100% on the image.

div {
  height: 100px;
  /*Ex*/
}

div img {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col1 col-md-4">
    <img src="http://via.placeholder.com/160x160" />
  </div>

  <div class="col2 col-md-4">
    <img src="http://via.placeholder.com/160x160" />
  </div>

  <div class="col3 col-md-4">
    <img src="http://via.placeholder.com/160x50" />
  </div>
</div>

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 proper way to input a valid path?

I am facing an issue with the path to the CSS folder in the linked picture. The HTML code is working fine, but the CSS seems to be not loading correctly. I suspect that the problem lies in the path. How can I rectify this? I'm unsure of what steps to ...

htmlcssdjangotemplatesdjango-templates

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

javascripthtmlcssbootstrap-5

Tips for Updating HTML Table Content Dynamically Using JavaScript without jQuery

I am in the process of developing a web application that requires me to dynamically change the content of an HTML table based on user input, all without relying on jQuery or any other external libraries. Adding rows to the table is not an issue for me, but ...

javascripthtmlhtml-tabledom-manipulation

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

javascripthtmljquerycssbootstrap-4

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

htmlcssreactjsimagemern

Using JQuery to switch classes and activate events

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <span class="fake_h">Too</span> </body> <script> $('.fake_h').click(function() { $(this).addClass( ...

javascriptjqueryhtml

Livewire refreshes dropdown selection

Scenario In my form, I have utilized a livewire component to enable real-time calculations by binding multiple inputs. My expectation is that the dropdown options remain static while the text input fields should be dynamic. Challenge The issue arises wh ...

phphtmllaravellaravel-livewire

What advantages does KnockoutJS offer over AngularJS?

Can KnockoutJS offer a unique feature that rivals or exceeds those of AngularJS? ...

javascriptjqueryhtmlangularjsknockout.js

Suggestions on designing a website's layout

Currently, I am in the process of designing a website that is tailored to perfectly fit within the browser window. Here's a brief overview of the layout: At this point, the Red area is set as display:block, while the Green area has been configured wi ...

htmlcsslayout

Switching over to styled components from plain CSS using a ternary operator

Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...

javascriptcssreactjsmaterial-uistyled-components

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

javascripthtmlcssjson

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

htmlcssflexbox

Having trouble making the JavaScript mouseenter function work properly?

Hi there, I'm having trouble with this code and I can't figure out why it's not working. $('#thumbs > li').mouseenter(function() { $(this).find("div").fadeIn(); }).mouseleave(function(){ $(this).find("div").fadeOut(); ...

javascriptcss

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

What is the best way to transform Adobe XD designs into HTML and CSS with Vue.js?

I am looking to create a single page application with vue.js and came across this helpful reference at . A colleague has created a prototype using Adobe XD, and now my task is to transform it into HTML/CSS while making it functional and connecting it to an ...

htmlcsstwitter-bootstrapvue.jsconverters

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Issue with closing the active modal in Angular TypeScript

Can you help me fix the issue with closing the modal window? I have written a function, but the button does not respond when clicked. Close Button: <button type="submit" (click)="activeModal.close()" ...

htmlangulartypescript

Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Struggling to create a unique grid-list that looks great on both desktop and mobile devices. Any tips or solutions would be greatly appreciated! I need a list (left image) with a special layout, which can be achieved through nested grids. However, I want ...

htmllistcssgridflexbox

Making a Dialog resizable with jQuery's Resizable Helper

Is there a way to implement the Helper feature from jQuery Resizable, which only shows a frame while resizing the container, in a Dialog? ...

javascriptjquerycssjquery-ui-resizable

Effortlessly automate clicking with JavaScript or HTML - learn how now!

Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...

javascriptjqueryhtml