flex-item中的图像忽略max-height：100％in chrome和firefox - （在safari中工作）

问题描述

我想要一个图片填充窗口大小/视口的宽度或高度。

为了更好地了解我想尝试，技术（或者flexbox）为中心。

html，body {height：100％; margin：0;}。flex-container {display：flex; align-items：center; justify-content：center; width：100％;高度：100％; background：green;}。flex-item {width：100％;高度：100％; text-align：center;}。flex-item：after {content：''; display：inline-block;高度：100％; vertical-align：middle;} img {max-width：100％; max-height：100％; vertical-align：middle;}

 < div class = flex-container> < div class =flex-item> < img src =http://i.stack.imgur.com/mrEyQ.jpg> < / div>< / div>  

I want an image to fill either the width or height of the window-size/viewport.

For a better understanding of what i’m trying to do, i’ve created an example on codepen - please check out and resize the preview. It works fine in safari but chrome and firefox seems to have problems. The image ignores the max-height property and overflows the flex-item dimensions.

Any suggestions to get this work in chrome and firefox?

html,
body {
  height: 100%;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  max-width: 100%;
  max-height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>

解决方案

The problem is that both the image and its containing block have

max-height: 100%;

Instead, remove the max for the containing block:

.flex-item {
    width: 100%;
    height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>

However, note that .flex-item will be centered inside .flex-container, but the image won't be centered inside .flex-item.

To fix that, you can use the centering in the unknown technique (or alternatively, flexbox).

html,
body {
  height: 100%;
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  width: 100%;
  height: 100%;
  text-align: center;
}
.flex-item:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>

这篇关于flex-item中的图像忽略max-height：100％in chrome和firefox - （在safari中工作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！