When the maximum width of an image within a flexbox is set, the aspect ratio may not be preserved

My goal is to use flex to easily center an img vertically inside a div, however, the behavior differs across various browsers.

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
</div>

https://jsfiddle.net/e0m2d6hx/

In Chrome, it works well, but in IE and FF, there seems to be an issue with max-width.

Could someone assist me with this? I am aware that I can center the img without using flex, but I would like to understand this approach better.

cssflexbox

Answer №1

How to Resolve Compatibility Issues in IE and Firefox

To ensure consistent results across Chrome, Firefox, and IE, make the following adjustments:

  • Add flex: 0 0 auto; to .flex-item img to address issues in IE.
  • Add object-fit: scale-down; to .flex-item img to resolve problems in Firefox.

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
  object-fit: scale-down;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
    </div>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/7yyf3nob/

Explanation for Variations Between Browsers

The discrepancies observed in browser rendering are likely due to the unique resizing behaviors of images within a flexbox layout on IE and Firefox. As flexbox is still evolving, browser vendors continue to enhance their support for this layout model.

Answer №2

Issue with Image resizing in flex items when using max-width:PERCENTAGE

Adapted version of the W3C CSS Flexbox example :

<!DOCTYPE html>
<html>
 <head>
  <title>
   Modified W3C FLEX EXAMPLE WITH ADDED FLEX TOOLBAR
   https://www.w3schools.com/css/css3_flexbox.asp
  </title>
  <style>
   body{
    font-size: 3vh;
   }
   .flexToolbar {
     background-color: DodgerBlue;
     display: flex;
     flex-basis: 64%;
     flex-wrap: nowrap;
     font-size: 1.5vh;
     font-weight: bolder;
   }
   .flexToolbar > div {
    /* https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div */
    align-self: flex-end;
    background-color: transparent;
    width: 100px;
    margin-left: 2vw;
    /* Your flex items are set to "min-width: auto", which gives them a min-width equal to their intrinsic width. 
       If you style your .container divs with "min-width: 0" you get the behavior I think you expect. 
       https://bugzilla.mozilla.org/show_bug.cgi?id=1109992
    */
    min-width: 0;
    text-align: center;
   }
   .flexToolbarImage {
    height: auto;
    max-width: 64%;
   }
  </style>
 </head>
 <body>
 <h1>Flexible Boxes</h1>
  <div class="flexToolbar">
   <div>
    <img id="dbImport" class="flexToolbarImage" src="db.import.png" alt="IMPORT DB" />
    IMPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbNew" class="flexToolbarImage" src="db.new.png" alt="NEW DB" />
    NEW
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbCreate" class="flexToolbarImage" src="db.create.png" alt="CREATE TABLE" />
    CREATE
   </div>
   <div>
    <img id="dbDrop" class="flexToolbarImage" src="db.drop.png" alt="DROP TABLE" />
    DROP
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbInsert" class="flexToolbarImage" src="db.insert.png" alt="INSERT ROWs" />
    INSERT
   </div>
   <div>
    <img id="dbUpdate" class="flexToolbarImage" src="db.update.png" alt="UPDATE ROWs" />
    UPDATE
   </div>
   <div>
    <img id="dbDelete" class="flexToolbarImage" src="db.delete.png" alt="DELETE ROWs" />
    DELETE
   </div>
   <div>
    <img id="dbSelect" class="flexToolbarImage" src="db.select.png" alt="SELECT ROWs" />
    SELECT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbSQL" class="flexToolbarImage" src="db.sql.png" alt="WRITE SQL"/>
    SQL
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbExport" class="flexToolbarImage" src="db.export.png" alt="EXPORT DB" />
    EXPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbRun" class="flexToolbarImage" src="db.run.png" alt="RUN SQL" />
        RUN
   </div>
  </div>
  <p>Try resizing the browser window.</p>
  <p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
  <p><strong>Note:</strong> Internet Explorer versions prior to 10 do not support Flexbox.</p>
 </body>
</html>

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

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

javascripthtmlcssbutton

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

javascriptjquerycss

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

pythonhtmlcssflaskjinja2

Unable to modify text color after implementing mat-sort-header in Angular Datatable

My current setup involves using an Angular data table to display data. I recently added the mat-sort-header functionality, which allowed me to change the font color of the header text. Below is a breakdown of my code: <section id="main-content" ...

cssangularangular-material

Attempting to optimize a webpage design for compatibility with Google's mobile-friendly testing tool

After much searching on the forum, this is my first post, so I kindly ask for patience! I am dealing with a 20-year-old website that urgently needs to be optimized for mobile devices. With almost 2200 pages, manual editing is out of the question, so I nee ...

htmlcssresponsive-design

Tips for returning the slider to its default position when a tab is deselected

A fantastic code snippet can be found at this link for creating an animated navigation bar. The only thing left on my wishlist is for the slider to reset to its original position if a tab is not selected. Currently, it remains static regardless of selectio ...

javascriptjqueryhtmlcss

Foundation Framework sidebar by Zurb

My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...

htmlcssresponsive-designzurb-foundation

What is the best way to apply a png overlay to each img tag when hovered over?

Here is the code snippet I am working with: <div class="latest-post"> <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark"> <span> <img width="140" height="100" src="http:// ...

jqueryhtmlcss

Is it possible to use Bootstrap's Accordion or Alert styles with HTML elements <details> and <summary>?

For my projects, I typically utilize Bootstrap for styling and usually do not include any Javascript as it is unnecessary. However, I am now working on a project that requires a feature similar to Bootstrap's Accordion, which does require Javascript t ...

htmlcsstwitter-bootstrapbootstrap-5html-tag-details

What is the best way to create a div that horizontally scrolls and contains multiple other div elements?

I've set up a div that contains other divs, including images and text. My goal is to make the main div scrollable horizontally while aligning the inner divs using inline-block. However, when I apply: overflow-x: scroll; The main div ends up with tw ...

phphtmlcssscroll

Place the division at the bottom of the screen

I'm facing an issue where I am trying to place a div at the bottom of the viewport but it's not working as expected. Here is how my current setup looks like: html <div class="parent"> <div class="bottom"> </div> </div&g ...

jqueryhtmlcss

Reducing image size using CSS can result in blurry images on multiple web browsers

Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet: #pic-holder img { -moz-transform: rotate(0deg); /*image-rendering:-webkit-optimize-contras ...

cssimagefirefoxsafari

Utilize CSS on a div element enclosed within a td element

I have been attempting to align the triangle over the edge of the table cell on both ends. However, part of the triangle is being hidden. I have tried using z-index, but it doesn't seem to have any effect. Can anyone provide insight into what might be ...

htmlcssangular

Tips for making a website display in landscape mode rather than portrait orientation

As a newcomer to web design, I am curious if it is feasible to create a website that automatically rotates to landscape view when accessed on a mobile device. The current project I am working on is fluid in design, so this feature would greatly enhance t ...

javascriptjquerycss

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

The drop-shadow filter is not functioning properly on the dropdown menu in Safari

https://i.sstatic.net/PIWly.png --> image displayed when the "products" Nav item is hovered, showing a dropdown menu https://i.sstatic.net/YHX1g.png --> image of the "products" Nav item after hovering is removed (shadow remains even when the dropdow ...

htmlcssblazorbootstrap-5

Creating a custom design for a button using an external CSS file

I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file. Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless ...

htmlcss

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

Troubleshooting Problem with Padding in ion-content for Ionic Angular

I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...

javascriptcssangularjsionic-framework

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss