Sorona Sorona - 9 months ago 64
CSS Question

How to make img scale in flexbox?

I have this huge image (I know, bad, will be replaced by some smaller ones for different viewport-sizes) that I want to display next to another div. Both elements are inside a flexbox, so flex-items.

See: https://jsfiddle.net/aedtyj9y/

My problem is that the image is way too big. What I would want is the image to take up all the space of

#test
which itself should only maximum take up 30% of the whole horizontal space, so having 70% of the
main class='flex-container'
for
details
and the rest for a an image that is contained in the 30% (preferably cropped instead of scaled)

Sounds easy, right? Just add
max-width:30%
to
#test
!

WRONG! https://jsfiddle.net/04wohehh/

Image is still too big.

So what, just add
max-width:100%; max-height:100%;
to the img itself, right?

Again, not working as intended:

https://jsfiddle.net/wqhtqq8d/

Answer Source

is this what you looking for?

  • set flex: 0 70% in .details
  • set flex: 0 30%; display: flex; align-items: center in #test

html,
body {
  margin: 0;
  padding: 0;
}

#info {
  background-color: #2aabd2;
  max-width: 100vw;
  min-height: 100vh;
}

#info nav {
  max-width: 5%;
}

.flex-container {
  display: flex;
}

main {
  background-color: red;
}

.details {
  flex: 0 70%
}

#test {
  flex: 0 30%;
  background: blue;
  display: flex;
  align-items: center
}

.testimage {
  display: block;
  max-width: 100%;
  background-color: blueviolet;
  box-shadow: 0 0 10vh #111;
}
<section id="info" class="flex-container">
  <nav id="node">
    <ul>
      <li>Home</li>
      <li>Other</li>
    </ul>
  </nav>
  <main class="flex-container">
    <div class="details">
      Blablablablabla
    </div>
    <div id="test">
      <img class="testimage" src="http://placehold.it/2000x2000">
    </div>
  </main>
</section>