What are some methods for equalizing the height of images in a flexbox layout when I am unsure of their individual dimensions?

I'm looking to create 2 images with different widths that are displayed at the same height side-by-side, preferably using a flex box.

The method below works if I have the image dimensions (962x706 and 962x1275).

Is there a way to achieve this without knowing the dimensions in advance?

<div style="display: flex; margin: 0 -5px">
    <div style="flex: calc(962/706); margin: 0 5px">
        <img src="https://i.sstatic.net/H7QKE.jpg"/>
    </div>
    <div style="flex: calc(962/1275); margin: 0 5px">
        <img src="https://i.sstatic.net/nsyuX.jpg"/>
    </div>
</div>

img {
  width: 100%;
}

You can check out a live example here: https://jsfiddle.net/b1f6v3kc/

htmlcssflexbox

Answer №1

To prevent distortion, set a minimum height with object-fit for cropping the image.

img {
  width: 100%;
  min-height: 300px;
  height: 100%;
  object-fit: cover;

}
<div style="display: flex; margin: 0 -5px">
    <div style=" margin: 0 5px">
        <img src="https://i.sstatic.net/nsyuX.jpg"/>
    </div>
    <div style=" margin: 0 5px">
        <img src="https://i.sstatic.net/H7QKE.jpg"/>
    </div>
</div>

Answer №2

If you want to ensure uniformity in image display, consider setting a fixed height for all the images or using JavaScript to determine their dimensions. Keep in mind that adjusting the height may alter the aspect ratio and potentially distort the image's appearance.

<div style="display: flex; margin: 0 -5px">
    <div style="margin: 0 5px">
        <img src="https://i.sstatic.net/nsyuX.jpg"/>
    </div>
    <div style="margin: 0 5px">
        <img src="https://i.sstatic.net/H7QKE.jpg"/>
    </div>
</div>

img {
  width: 100%;
  height: 300px;
}

https://jsfiddle.net/xsn07yaw/

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

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

htmlcsssendgrid

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts

Ignoring custom elements does not occur when the child is set to display as inline-block

My code includes custom elements that exhibit strange behavior when a child element has the "display: inline-block" style. Let's examine these two div elements: <div style="padding: 4px;"> <randomcustomelement style="background-color: y ...

htmlcss

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

htmlcss

Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...

javascriptjqueryhtmlcss

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

htmlcss

Retrieve JSON data from the website and use AJAX and jQuery to remove it

I am working on a local project with an app that contains a table of data. I need to download the data from a JSON file (todo.json) using jQuery and AJAX, display it in the table in HTML, and then be able to delete, update, and save individual objects or a ...

javascripthtmljsonajax

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

htmlcssresponsive-design

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

javascriptphpjqueryhtmlajax

Interacting with jQuery and HTML: Revealing sub dvi box content by clicking on the current div box ID

This is my unique jQuery and HTML code. My objective is to display the corresponding sub_box when clicking on box1, box2, or box3. For example: Clicking on box1 should reveal sub_box_1. I have attempted some jQuery code but haven't achieved the desi ...

javascriptjqueryhtmlcss

"Even rows are the only ones being highlighted on the table

I created a table that dynamically highlights all odd rows. To achieve this, I implemented a method to identify the row number and then apply the alt class to those specific rows. In order to highlight the rows on hover, I added a simple :hover selector ...

htmlcsshover

The list style of Bootstrap Select Drop Down isn't vertical

Has anyone encountered an issue with bootstrap-select where the options in a drop down box are not vertically listed? <script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script> <script src="{% static 'r ...

csstwitter-bootstrapbootstrap-selectpicker

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

I have a search form that includes select options with two values. However, I want to have two select options for both the Max and Min price values. <input type="hidden" id="budget_min" name="filter_budget_min" value="0" /> <select onchange="upda ...

javascriptphphtml

The dropdown button becomes unresponsive when attempting to navigate within it using ajax requests

Hello fellow members of the StackOverFlow community, I recently implemented a Bootstrap 5 dropdown button to fetch tabs from the backend using AJAX. Everything was functioning correctly until I encountered an issue where, upon clicking a button within one ...

phphtmlajaxtwitter-bootstrapbootstrap-5

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

Strange outcomes observed with CSS Selector nth-child

When utilizing the CSS nth-child selector, I am encountering some peculiar issues. The HTML structure is as follows: <div class="block feature-callout-c" id="overview"> <div class="row"> <div class="span twelve"> ...

htmlcsscss-selectors

How can I use jQuery to dynamically add and remove input values?

I am having trouble with saving and deleting values in a table row. I have an input field and an add button. When I click on the add button, I want the input value to be saved in a table row with a delete button next to it. I need to be able to delete indi ...

jqueryhtmlcss

What is the best way to include a collapsible submenu in a dropdown menu

Is there a way to incorporate a collapse menu into a dropdown menu? The desired functionality is for the dropdown menu to close when clicking on a menu item with collapse, and then have the collapse feature work again when reopening the dropdown menu. & ...

javascripthtmlbootstrap-4dropdown

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

What is preventing these arrows from spinning?

I am struggling to find a solution to rotate the arrows on the x-axis, which are added by the::before pseudo-element when the link is active. Despite trying keyframes and searching online, I have not been able to achieve the desired result. Below you wil ...

htmlcsscss-animationspseudo-element