Geek Answers Handbook

Image inside flex-item ignores max-height: 100% in chrome and firefox - (works in safari)

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

For a better understanding of what I'm trying to do, ive created an example for codepen - view and resize the preview. It works fine on safari , but chrome and firefox seem to have problems. The image ignores the max-height property and overflows the sizes of flexible elements.

Any suggestions to get this working 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>
Run codeHide result
+4
source share
2 answers

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

max-height: 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%;
  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>
Hide result

, .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%;
  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>
Hide result
+3

Orio Safari, : Safari

/*  Safari 7.1+ only */
_::-webkit-full-page-media, _:future, :root .flex-item  { height : auto; }

css Safari.

JSFiddle

0

More articles:


All Articles