Images to take up as much space as possible but keep aspect ratio and contain in window height-CodePudding

I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.

Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.

Any tips. outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.

.outer-container {
  display: flex;
  background-color: green;
  height: calc(100vh - 100px);
  clear: auto;
}
.left-column {
  
}
.right-column {
  display:flex;
  justify-content: top;
  flex-direction: column;
}
.left-image {
  width: 100%;
}

.right-image {
  width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/

<div >
  <div >
    <img  src="https://via.placeholder.com/200x500/333300">
  </div>
  
  <div >
    <img  src="https://via.placeholder.com/500X250/33000">
    <img  src="https://via.placeholder.com/500x250/003300">
    </image>
  </div>
</div>

CodePudding user response：

Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.

.outer-container {
  display: flex;
  background-color: green;
  height: calc(100vh - 100px);
  clear: auto;
}
.left-column {
  
}
.right-column {
  display:flex;
  justify-content: top;
  flex-direction: column;
}
.left-image {
  width: 100%;
  max-height: 100%;
}

.right-image {
  width: 100%;
  max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/

<div >
  <div >
    <img  src="https://via.placeholder.com/200x500/333300">
  </div>
  
  <div >
    <img  src="https://via.placeholder.com/500X250/33000">
    <img  src="https://via.placeholder.com/500x250/003300">
    </image>
  </div>
</div>

CodePudding user response：

This might work as a starting point. Not 100% sure how you want the first column in relation to the second.

I added a footer since you seemed to indicate that?

.outer-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr) 100px;
  background-color: green;
  height: 100vh;
}

.left-column {
  /* keeps the left image in the box */
  min-height: 0;
  grid-row: 1 / 2;
  grid-column: 1 / 1;
  border: solid cyan 2px;
  display: flex;
  justify-content: center;
}

.right-column {
  border: solid yellow 2px;
  display: flex;
  align-items: start;
  justify-content: top;
  flex-direction: column;
}

.left-image {
  height: 100%;
}

.right-image {
  width: 100%;
}

.footer {
  /* put accross all columns of last row and super center content */
  grid-column: 1 / 3;
  grid-row: 3 / 3;
  background-color: #ffdd88;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div >
  <div >
    <img  src="https://via.placeholder.com/200x500/333300">
  </div>
  <div >
    <img  src="https://via.placeholder.com/500X250/33000">
    <img  src="https://via.placeholder.com/500x250/003300">
  </div>
  <div > I am the footer thing</div>
</div>