1

I want to create a list of images that will fill the whole height of the side panel of my app. But I want the images to be responsive too. I was able to make the images responsive, the problem is that the side panel won't shrink for the resized images width.

Here a example in CodePen so you can play with the container height: https://codepen.io/guilhermeaiolfi/pen/bGvBdpG

html, body {
    height: 100%;
    margin: 0;
}

.app .left-side {
    
}

.app .right-side {
    margin: 10px;
}

.app {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: row;
}
.zoom__images {
    border: 1px solid black;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zoom__images > * {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
    
}

.zoom__images img {
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}
<div class="app">
  <div class="left-side">
    <div class="zoom__images">
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
    </div>
  </div>
  <div class="right-side">
  content
  </div>
</div>

The images size (both height and width) are being properly handled when the .left-side height changes, but the left-panel width is always 400px wide when it should be the size of the images inside it.

Thanks.

Guilherme Aiolfi
  • 45
  • 7

1 Answers1

1

i think you want like this

html, body {
  height: 100%;
  margin: 0;
}

.app {
  display: flex;
}

.left-side {
  background:red;
  flex: 1;
}

.left-side .zoom__images div img{
  width: 100%;
}

.right-side {
  flex: 1
}
tst.flopp
  • 31
  • 7
  • The images are OK. I don't want to change how they are displayed. I just want the ```.left-side``` to be the same width as the images. – Guilherme Aiolfi Jul 14 '22 at 16:53
  • in .left-side you need 400px then ` .left-side { flex: 1; max-width: 400px; } .left-side .zoom__images div img{ min-width: 400px; }` – tst.flopp Jul 15 '22 at 13:16
  • Thank you for your interest. But that's not what I am looking for. All images should be visible, all the time in any height the .app container has. – Guilherme Aiolfi Jul 15 '22 at 19:19