flex-item中的图像忽略max-height：100％in chrome和firefox - （在safari中工作） [英] Image inside flex-item ignores max-height:100% in chrome and firefox - (works in safari)

问题描述

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

为了更好地了解我想尝试， 我已经创建了一个关于codepen的例子 - 请检查并调整预览大小。 它在safari 工作正常，但chrome和firefox似乎有问题。图片忽略max-height属性并溢出flex-item维度。

有任何建议可以在chrome和firefox中使用此工具吗？

  html，body {height：100％;}。flex-container {display：flex; align-items：center; justify-content：center; width：100％;高度：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>  

解决方案

问题是图片及其包含的块都有

 最大高度：100％; 
  

请删除 max 块：

  .flex-item {
 width：100％; 
 height：100％; 
} 
  

  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％; 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>  

.flex-item 将在 .flex-container 中居中，但图像不会居中 .flex-item 。

要解决这个问题，您可以使用以未知技术（或者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中工作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！