Menu
I'm trying to use flex to simply vertically center an img inside div, but it is working differently in each browser.
.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/
It is good in chrome, but in IE and FF it looks like it doesn't work with max-width.
Can anyone help me with this? I know that I can center the img without flex but I want to understand this.
566
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Fixed size If you remove the 100% width above, then the image should retain its normal size even when the available space is reduced. However, if you want to keep the 100% img for any reason, then you need to add the flex-shrink property to the element containing the image and give it a value of 0.
Fortunately, the solution is simple. You just need to replace your image/flex item's align-self property's default stretch value with another value. Instead of stretch you can use center , which will remove the image stretching, and vertically align your image in the middle of its parent container.
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
The following changes should result in the same result across Chrome, Firefox and IE:
flex: 0 0 auto; to .flex-item img. This fixes IEobject-fit: scale-down; to .flex-item img. This fixes 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/
Unfortunately I can't explain why the result between the browsers is so different other than it would appear that the natural resizing properties of an img are lost when using the flexbox model in IE and Firefox. flexbox is still a relatively new model and the vendors are still refining their implementations.
186
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
