Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this:

   html,body {
       margin:0;
       padding:0;
   }
   
   body {
       height:100%;
       width:100%;
   }
   
   .panel-grid
   {
       -webkit-align-items: flex-start;
        align-items: flex-start;
       margin-bottom:30px;
       display:flex;
       justify-content:space-between;
    }

    #section-163 {
        width:calc(61.8034% - ( 0.38196600790794 * 30px ) );
        align-self:auto;
    }

    #section-260
    {
        width:calc(38.1966% - ( 0.61803399209206 * 30px ) );
        align-self:auto;
    }

    .myimage {
        object-fit:cover;
        width:100%;
        height:100%;
    }

<div class="panel-grid panel-no-style">
<div id="section-163" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/1600x900/000/fff">
</div>
</div>
</div>

<div id="section-260" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/500x600/000/fff">
</div>
</div>
</div>
</div>

I'm attempting to use object-fit to crop the images so that their heights match. Can anyone point out where I might be making a mistake?

htmlcssflexbox

Answer №1

Consider removing the align-items: flex-start property from the .panel-grid class as it may be overriding the default value of stretch.

 .panel-grid {
   /* -webkit-align-items: flex-start; */
   /* align-items: flex-start; */
   margin-bottom: 30px;
   display: flex;
   justify-content: space-between;
 }


html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
}

.panel-grid {
  /* -webkit-align-items: flex-start; */
  /* align-items: flex-start; */
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
}

#section-163 {
  width: calc(61.8034% - ( 0.38196600790794 * 30px));
  align-self: auto;
}

#section-260 {
  width: calc(38.1966% - ( 0.61803399209206 * 30px));
  align-self: auto;
}

.myimage {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="panel-grid panel-no-style">
  <div id="section-163" class="panel-grid-cell">
    <div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
      <div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
        <img class="myimage" src="https://dummyimage.com/1600x900/000/fff">
      </div>
    </div>
  </div>

  <div id="section-260" class="panel-grid-cell">
    <div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
      <div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
        <img class="myimage" src="https://dummyimage.com/500x600/000/fff">
      </div>
    </div>
  </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 best way to modify part of a URL and refresh the page with the updated changes?

Good evening, everyone. This is my inaugural post on this platform, so I hope I am following the norms correctly. I have scoured various sources, including this site, in search of a solution to a problem I am facing, but I have not come across anything t ...

javascriptjqueryhtmlurlfrontpage

In what way are these fonts being displayed through the utilization of a .js file?

Why are people opting for unique fonts on their browsers using .js files instead of graphics? For example, like typekit? ...

javascripthtmlcssfonts

Unable to select checkbox within a table using Selenium WebDriver with Java

Having trouble checking a checkbox inside a table using Selenium Webdriver in Java? Even with version 2.52.0 of Selenium, the element not found error persists across different web browsers. The iFrame seems to be correct as I can interact with other compon ...

htmlseleniumxpathselenium-webdriver

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

I am facing an issue with the gap between the navbar and carousel in my materialize design. I have implemented Vue components for each div and Laravel as the backend. Using Sass for CSS preprocessing, I attempted to adjust the margins for the body, navbar, ...

csslaravelvue.jssassmaterialize

Strategies for detecting changes in multiple HTML select elements with jQuery

I currently have three select HTML tags and I would like to filter my table using the selected values (group of selected tags) with an AJAX request. For example, filtering by Gender, Location, and Season. My question is how can I achieve this without dup ...

jqueryhtmlajaxselect

Calculating the Load Time for a Web Page in C#

Is there an easy method for measuring the time it takes for a web page to fully load after hitting Enter? Do I need to utilize a Timer, or are there functionalities within the Web Browser control (or .net framework) that I have overlooked? Appreciate any ...

c#.nettestingperformancehtml

The MDL layout spacer is pushing the content to the following line

Here's an interesting approach to Material Design Lite. In this example from the MDL site, notice how the 'mdl-layout-spacer' class positions elements to the right of the containing div, giving a clean layout: Check it out <!-- Event ca ...

javascripthtmlcssmaterial-design-lite

The XmlUtil.serialize(root) function is converting empty tags into self-closing tags

Check out this cool code snippet featuring an empty div tag (<div></div>): import groovy.xml.DOMBuilder import groovy.xml.XmlUtil def HTML_STRING = ''' <html> <div></div> <div>Some text</d ...

htmlxmlgroovyxhtml

When making changes to my database using PHP and MYSQL, only the first column gets updated while the rest remain unchanged

I have a mysql database with the following columns: firstname, lastname, age, email, phone When I attempt to update the data, it sometimes turns out like this: John Doe 23 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2e2e2 ...

phpmysqlhtml

Tips for traversing through jquery ui accordion when a single panel has been disabled

I currently have a jQuery UI accordion set up with Next and Previous buttons in each panel to navigate through the sections. Additionally, I have a select HTML element in one of the panels where I can choose an option. If Option 1 is selected, the second a ...

javascriptjqueryhtmljquery-ui

Is there a way to determine if a container is overflowing at the top?

Currently, I am using Puppeteer to scrape Slack. My goal is to confirm whether I have scrolled to the very top of the channel feed. The issue arises because the channel feed does not actually scroll, making it impossible for me to utilize the method outli ...

javascripthtmlcssoverflow

The title element is persistently appearing on the same line

As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...

htmlcsspositioncss-float

Separating the rules for development and production modes in the webpack configuration file

I'm currently in the process of working on a front-end project using HTML. Within my project, I have integrated the Webpack module bundler and am utilizing the image-webpack-loader package for image optimization. However, I've encountered an issu ...

javascripthtmlnode.jswebpackwebpack-dev-server

Discovering a way to capture the space bar event in a number input field with JavaScript

Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...

javascripthtml

Is there a way to transform JSON into HTML with PHP?

I am attempting to reverse engineer the function referenced in this discussion: [Post][1] [1]: https://stackoverflow.com/a/23427469/19867306 @scozy demonstrated a function for converting HTML text to a JSON model. Now, I need to convert the same JSON mode ...

phphtmljson

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Utilizing create-react-app for my front end scripts and firebase hosting for deployment has been smooth overall. However, I've encountered an issue where updates to CSS and HTML files don't always reflect on the domain until I manually clear the ...

htmlcssreactjsfirebasefirebase-hosting

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

Utilizing Vue.js to Showcase Real-Time Data on an HTML Page

I am attempting to showcase the bill structure on an HTML page by retrieving data in Vue and Axios. There is a table where orders are listed, with each row having a "Print" button. When this button is clicked, I want to display the specific order details i ...

javascripthtmlapivue.js

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js