0

I have an img inside an article. The article height is the same as the body minus the top nav (variable, of course). The only way I've found for object-fit to work is to put a fixed height in the article, which doesn't make sense, since its height is dynamic.

What am I doing wrong?

body {
  margin:0;
  height:100vh;
  display:flex;
  flex-direction:column;
}
#navTop {
  background:lightgreen;
}
main {
  background:gray;
  padding:0.5em;
  display:flex;
  flex:1;
  align-items:stretch;
}
#navLeft {
  background:beige;
  min-width:25vw;
  max-width:25vw;
}
article {
  background:#ffdd80;
  flex:1;
  /*height:90vh;  /*uncomment that line to see it working*/
}
article img {
  height:100%;
  object-fit:scale-down;
}
<nav id='navTop'>Title</nav>
<main>
  <nav id='navLeft'>
    Menu
  </nav>
  <article>
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/White-beardedHermit.jpg' />
  </article>
</main>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Rodrigo
  • 4,706
  • 6
  • 51
  • 94

0 Answers0