1

I'm trying to create a full-screen image view. In addition to the full screen image, they will be able to optionally show some info about that image (title, description, tags, etc.)

If I have something like this...

<html>
  <div class="container">
      <img src="https://i.insider.com/5c65a75d74c587423d6a711a?width=1100&format=jpeg"/>
  </div>
</html>


.container {
display: flex;
flex-flow:column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: orange;
left: 0;
top: 0;
position: fixed;
}

img{
  max-width: 90%;
  max-height: 90%;
}

The image resizes cleanly no matter how much I mess with the height of the window.

But when I add another div to the markup after the img, and try resizing the height again... the image only starts to resize once it already runs partially off the page.

https://codepen.io/Nickprovs/pen/pojXzVw

How can I prevent that?

I basically want the bottom div (informational div) to have an automatic size based on its content and for the image to resize in the available space to fit.

Bad: Image not resizing in time when another element is in flexbox. Gets cut off. Bad- Image not resizing in time when another element is in flexbox

Good: Picture resizes just fine when all by itself in the flexbox. Good - Picture resizes just fine when all by itself in the flexbox

Nickprovs
  • 51
  • 1
  • 5
  • Where do you want to place extra info? – Vaibhav May 28 '20 at 02:44
  • Aligned to the bottom ideally. Which I believe I can do with margin-top auto on the info div. – Nickprovs May 28 '20 at 03:01
  • You don't want to use `justify-content: center` in this case. That's the source of the problem. If you remove that rule, the overflow stops. If you must vertically center, use an `auto` margin instead. More details in the duplicate post. – Michael Benjamin May 28 '20 at 03:34
  • If I do that, resizing from the bottom starts to cut off whatever content is on the bottom of the page rather than starting to resize the photo. Any ideas for that? – Nickprovs May 28 '20 at 03:53
  • The last piece of the puzzle was to specify a min-height in addition to my max height for my image. Then everything scaled together. – Nickprovs May 28 '20 at 04:48

1 Answers1

0

In the codepen you mentioned, labels are marked display: block so each label taking full width space on each line. Just remove block default is inline-block.

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: orange;
  left: 0;
  top: 0;
  position: fixed;
}

img {
  max-width: 90%;
  max-height: 90%;
}
.randomDiv{
  background-color: blue;
  margin-top: 2px;
}
<div class="container">
  <img src="https://i.insider.com/5c65a75d74c587423d6a711a?width=1100&format=jpeg" />

  <div class="randomDiv">
    <label>Hey</label>
    <label>Hey</label>
    <label>Hey</label>
    <label>Hey</label>
    <label>Hey</label>
    <label>Hey</label>
    <label>Hey</label>
  </div>
</div>
Vaibhav
  • 1,412
  • 1
  • 10
  • 14
  • This is not what I'm looking for. It shouldn't matter what's in the div. This doesn't solve the problem. It's still there. It's just that only a tiny portion of the image is cut off when resized. – Nickprovs May 28 '20 at 03:20
  • okay let me edit my answer – Vaibhav May 28 '20 at 03:22
  • If you remove the div from the markup in the html. You'll see what I mean. How the image resizes when it's alone in the flexbox, and how it resizes when there's another element is different. And I'm not sure what to do about that. – Nickprovs May 28 '20 at 03:24