Firefox flexbox image width

后端未结

关注

 4  1965

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

相关标签:

4条回答

孤城傲影

2020-12-06 11:05

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>

0 讨论(0)

鱼传尺愫

2020-12-06 11:20
I have to admit that I'm not sure why, but for some reason in Firefox it looks like you have to give the image a width/height (i.e. something other than "auto"). Our old friend 100% seems to do the trick:
```
.flexbox .middleColumn img {
    width: 100%;
    height: 100%;
    display: block;
}
```
Here's a fiddle showing the working solution. Note that I changed the side columns to flex:2 to make the result a bit more apparent.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦谈多话

2020-12-06 11:21
In my experience, the approach is slightly different, maybe strange, but it works. Basically, I fix the max width to the real image width, so it won't pixelate, and use percentage width instead of max-width. If you have, say an <ul> (flex) container, the cells will be:
```
li{
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   width: 50%; // for example..

   img{
     display: block;
     max-width: [your real img width in px] // instead of 100%;
     width:100%; // instead of max-width
   }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-12-06 11:29
I seem to get this working with the following:
```
.flexbox {
  display:flex;
}
.flexbox .column {
  flex:1 1 0;
  overflow:hidden;
  background-color: red;
}

.flexbox .middleColumn {
  flex-grow:3;
  flex-shrink:3;
}

.flexbox .middleColumn img {
  max-width:100%;
}
```
setting flex:1 1 0; on all columns sets them to equally grow and do so from the even and miniscule basis of 0px.

You then overide the grow and shrink on .middleColumn

max-width:100%; is needed as per usual

the magic seems to be overflow:hidden; on the item getting flexed.

the other stuff on the image is not needed.
0 讨论(0)
发布评论:

提交评论
- 加载中...