Flexbox on IE11: image stretched for no reason?
to avoid this funny behavior, you may reset the flex-shrink
property.
This looks like a bug, despite what Microsoft says:
<'flex-shrink'>
Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.
If omitted, the element's negative flexibility is "0". A negative value is not valid.
Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
img {
max-width: 100%;
flex-shrink: 0;
}
img {
max-width: 100%;
flex-shrink: 0;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
article.post-grid .article-content {
padding: 20px 35px;
}
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />
<div class="article-content">
<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
<p>Recommend new contented intention improving bed performed age.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />
<div class="article-content">
<h2>SHORT TITLE</h2>
<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
</div>
</article>
</div>
Internet Explorer stretches image in flexbox
IE is notorious for having many flexbugs. It's reliable for very simple flex layouts. But with even the slightest bit of complexity, IE requires "special attention" (i.e., ugly hacks).
In this particular case, it appears IE requires a height limitation on the parent of the image:
Instead of this:
.below { }
img {
width: 60%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
Try this:
.below {
flex: 0 0 200px; /* flex-basis: 200px (demo value only) */
}
img {
height: 100%;
/* flex: 0 0 100%; <--- this should work also, but it doesn't */
}
revised fiddle
Why does flexbox stretch my image rather than retaining aspect ratio?
It is stretching because align-self
default value is stretch
.
Set align-self
to center
.
align-self: center;
See documentation here:
align-self
max-width of image not working in flexbox for IE 11 but works on google chrome
IE browser has some issues with Flex. It is not able to calculate the values properly with flex.
(1) I suggest you replace max-width with width in .detail img class.
(2) I suggest you replace flex: 1 0 0; with flex: 0 0 auto; in .detail class.
Edit:-
Added img tag inside one extra div solved the issue as informed by @Xegara. It also worked with max-width For IE 11 browser.
Modified code:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<style>
body {
width: 100%;
}
.extra_div{
width: 100%;
}
.element {
display: flex;
flex-direction: row;
width: 100%;
}
.name {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
font-weight: bolder;
}
.detail-wrapper {
display: flex;
flex-direction: column;
/*flex: 0 0 auto;*/
width: 100%;
}
.detail {
display: flex;
/*flex: 1 0 0;*/
flex: 0 0 auto; /*-------------------------made change here */
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.detail img {
max-width: 100%; /*-------------------------made change here */
}
.name, .detail {
border: 1px solid;
margin: 8px;
padding: 8px;
text-align: center;
word-break: break-word;
}
</style>
</head>
<body>
<div class="element">
<div class="name">name</div>
<div class="detail-wrapper">
<div class="detail">
<div class="extra_div">
<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
</div>
<div class="detail">
<a href="#">url</a>
</div>
</div>
</div>
</body>
</html>
IE 11: Image doesn't scale down correctly within flexbox
IE11 seems to have some trouble with the initial value of the flex-shrink
property. If you set it to zero (it is initially set to 1), it should work:
div.outer {
width: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
div.inner {
flex-shrink: 0;
width: 100%;
border: 1px solid red;
}
img {
width: 100%;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
</div>
Flex-grow in IE11 doesn't vertically stretch
Seems IE11 has an issue with only having min-height
.
Try adding a base height.
.p{
display: flex;
min-height:100%;
height: 100%;
}
body,
html {
background-color: red;
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.p {
display: flex;
min-height: 100%;
height: 100%;
}
.c1 {
flex: 1;
background-color: gray;
}
<div class="p">
<div class="c1">
asdasd
</div>
</div>
Why does wrapping an image with a div in a flexbox scale it correctly but img item doesn't scale?
Does this do what you need?
Markup:
<body>
<div class="stack">
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>
</body>
CSS:
.stack {
display:flex;
}
.stack img {
align-self:center;
width: 100px;
}
https://jsfiddle.net/zbac1dxe/6/
Related Topics
Different CSS for Each Browser
Slanted Diagonal Line in HTML or CSS
Change Background Image Opacity
Table Headers Position:Sticky and Border Issue
How to Include All CSS Kept in a Directory
How to Stop the Browser from Url-Encoding Form Values on Get
Html5: Non-Replaced VS. Replaced Element
Display:Inline with Margin, Padding, Width, Height
Height of Flex Container Not Working Properly in Safari
CSS Filter:Invert Not Working with Background-Color
How Remove Border Around Image in CSS
Bootstrap Grid, Do I Need a Container
Chrome Getusermedia Not Requesting Permission Locally
Is Google.Loader.Clientlocation Still Supported
How to Use the CSS Pseudo-Element :Before{ Content: '' } to Affect an <Option> Element
How to Create a Slanted Background with CSS