Menu
I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?
Note: The image should never be larger than it's original size.
Chrome:
Firefox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
361
This is how our image gallery looks like in Firefox 64.0.2, without using any CSS: The browser has stacked the images next to each other nicely, retaining their original 320×240 px size. However, if you try to resize the browser window you’ll see that the images are not responsive—which is even a bigger problem if you use larger images.
It’s important to know that flexbox does have issues with keeping aspect ratio when images have different widths and heights. In such cases, the best solution is to lay out the image gallery using the CSS grid.
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. HTML basics (study Introduction to HTML ), and an idea of how CSS works (study Introduction to CSS .)
Creating the flexbox layout is pretty simple—just one line of code. We only need to set the flex container to display: flex. We don’t have to add any CSS rules to the flex items at the moment. Below, you can see how our image gallery looks like now. Note that as we are randomly generating the images, they will change on every browser reload.
You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).
Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.
(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)
Snippet with that fixed:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
min-width:0;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
