CODEWITHSUNDEEP
htmlcss
user8758206
user8758206

Reputation: 2191

Keeping aspect ratio for images with percentage width & resizing other divs while keeping aspect ration

I'm trying to figure out a way of making the image div having and keeping an aspect ratio of 3:2 with different web browser sizes (for mobile responsiveness etc). I want to be able to re-size my browser window and the image to always have a 3:2, so I want the image height to also re-size.

Is there any way of achieving this with my current code? I'd also like to be able to make the blue text div smaller without having to make the image above bigger, because if I reduce the height percentage of the blue div, I'll have to increase the picture div above to make up the 100% parent element's height, but this will throw the aspect ratio of the picture div out.

I'm not sure how to achieve this as it's more confusing than I thought.

Appreciate any help, thanks...

#bg {
  width: 100%;
  height: 300px;
  background: yellow;
}
#window-container {
  width: 30%;
  height: 200px;
  background: orange;
}
#img {
  background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
  height: 67%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
#text-wrap {
  background: lightblue;
  width: 100%;
  height: 33%;
}
<div id="bg">
  <div id='window-container'>
    <div id='img'></div>
    <div id='text-wrap'>text here</div>
  </div>
</div>

Upvotes: 0

Views: 702

Answers (2)

VXp
VXp

Reputation: 12058

You can do it with the img element and Flexbox:

#bg {
  background: yellow;
}

#window-container {
  display: inline-flex; /* only takes the contents width */
  flex-direction: column; /* stacks children vertically */
  background: orange;
}

#text-wrap {
  background: lightblue;
}

img {
  display: block; /* removes bottom margin/whitespace */
  /*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
  max-width: 100%; /* horizontal responsiveness */
  max-height: 100vh; /* vertical responsiveness */
}
<div id="bg">
  <div id='window-container'>
    <img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
    <div id='text-wrap'>text here</div>
  </div>
</div>

Upvotes: 1

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7923

May this be what you want?

#bg {
  width: 100%;
  background: yellow;
  display: table;
}
#window-container {
  width: 30%;
  background: orange;
  display: block;
}
img {
  width: 100%;
  height: auto;
}
#text-wrap {
  background: lightblue;
  padding: 10px;
}
<div id="bg">
  <div id='window-container'>
    <img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
    <div id='text-wrap'>text here</div>
  </div>
</div>

Upvotes: 1

Related Questions