Keeping aspect ratio of multiple images in the same divs

Question

I've come across a bit of tricky code and wonder if anybody can help me. I want the aspect ratio for the images of the door and elephant to be 3:2 exactly, and I want the height of the images to be exactly the same.

At the moment, the div container with the door is bigger than that with the elephant. How can these be the same size while keeping an exact 3:2 image aspect ratio?

Thanks a lot for any help!

#bg {
  width: 100%;
  background: yellow;
  display: table;
}
#window-container {
  width: 10%;
  background: orange;
  display: block;
  float: left;
}
img {
  width: 100%;
  height: auto;
  display: block;
}
#text-img {
  width: 100%;
  height: auto;
  background: url('https://cml.sad.ukrd.com/image/638038.png');
}
#text-wrap {
  background: lightblue;
  padding: 10px;
}

<div id='bg'>
  <div id='window-container'>
    <img src='http://www.sickchirpse.com/wp-content/uploads/2017/08/Elephant.jpg'>
    <!--<div id='test-img'></div>-->
    <div id='text-wrap'>text goess here</div>
  </div>

  <div id='window-container'>
    <img src='https://images.homedepot-static.com/productImages/7e02e385-820f-42de-85fc-8b3b4b6ec15c/svn/tangerine-mmi-door-doors-without-glass-z024086r-64_1000.jpg'>
    <!--<div id='test-img'></div>-->
    <div id='text-wrap'>text goes here</div>
  </div>
</div>

I'm not following... wouldn't setting a fixed width and height be exactly what you're looking for? — Facundo Corradini, Jan 11 '18 at 10:59
it's difficult to explain, but wouldnt a fixed width and height stretch the images? I was considering putting the images in a div as a background, but then I assume their view would cut off on some areas — user8758206, Jan 11 '18 at 11:06
yes they would. That's the part I'm not following. You can't expect images to be the same height and maintain *their* aspect ratio, if they have different ones. Maybe you want a fixeds height and images that adapt to keep their aspect ratio, with the container being 3x2? — Facundo Corradini, Jan 11 '18 at 11:13
thanks for the idea. I made a JS Fiddle with your idea: https://jsfiddle.net/oLhvnmLg/ - but the containing boxes need to be responsive, so when the browser window is shrunk down, the containers need to not drop to the next line. Any ideas? The aspect ratio has kept the same though — user8758206, Jan 11 '18 at 11:51

Calvin Nunes · Accepted Answer · 2018-01-11T12:33:36.173

It was not easy and maybe it not exactly what you want, but please, take a look. I assumed that 3:2 means something like 100%:66%... So I did this:

#bg {
  width: 100%;
  background: yellow;
  display: flex;
}
#window-container {
  display: flex;
  float: left;
}
img{
    background: orange;
    width: 100%;
    max-height: 66%;
    min-height: 66%;
    margin-bottom: -4px;
}
.content{
  width: 33vw;
  height: 33vw; 
  padding: 0;
}
#text-img {
  width: 100%;
  height: auto;
  background: url('https://cml.sad.ukrd.com/image/638038.png');
}
#text-wrap {
    background: lightblue;
    display: inline-flex;
    width: 100%;
    height: 34%;
    overflow: auto;
}
#text-wrap::-webkit-scrollbar-track{
background: #000;
}
#text-wrap::-webkit-scrollbar {
width: 8px;
}
#text-wrap::-webkit-scrollbar-thumb {
background: #fff;
border: 1px solid #aaa;
}

<div id='bg'>
  <div id='window-container'>
    <div class="content">
      <img src='http://www.sickchirpse.com/wp-content/uploads/2017/08/Elephant.jpg'>
      <div id='text-wrap'>
        <span style="padding:10px">text goes here</span></div>
    </div>
  </div>

  <div id='window-container'>
    <div class="content">
      <img src='https://images.homedepot-static.com/productImages/7e02e385-820f-42de-85fc-8b3b4b6ec15c/svn/tangerine-mmi-door-doors-without-glass-z024086r-64_1000.jpg'>    
      <div id='text-wrap'>
        <span style="padding:10px">text goes here text goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes here</span></div>     
      </div>
    </div>
</div>

Also, take a look here: Maintain the aspect ratio of a div with CSS

EDITTED to add scroll bar if you want it

thanks for that, but is there any way of changing the size of the blue div? I actually initially tried something similar to your solution, but discovered that changing the size of the blue div means that the full height of the parent isn't there — user8758206, Jan 11 '18 at 11:46
Sorry, i didn't get it... the height of parent isn't there? what size do you want for the blue div? — Calvin Nunes, Jan 11 '18 at 11:51
Where I'm using it, I need to be able to make it big enough to contain the description text inside it, so it will vary on the container — user8758206, Jan 11 '18 at 11:52
from what another user suggested, I also made a JS fiddle - https://jsfiddle.net/oLhvnmLg/2/ - but this way means resizing the browser window forces them to the next line — user8758206, Jan 11 '18 at 11:53
now i get it... well, use overflow to create a scroll bar when it excedes the size is out of question? — Calvin Nunes, Jan 11 '18 at 12:01
I'll edit my answer and then you see if it helps or no. Other way maybe will be necessary to restructure everything to achieve the exactly behavior you want — Calvin Nunes, Jan 11 '18 at 12:27

Keeping aspect ratio of multiple images in the same divs

1 Answers1