How to have maintain 2:5 ratio in div container?

Question

I have an <img> at all times.

How can I have the <img> maintain a 2:5 ratio in relation to the container's size?

Here is the code (attempted the width of the <img> to have 100% so it adjusts its width in relation to the fluid container's size, but the size of the <img> is not in 16:9 ratio):

Thank you and will accept and upvote the answer.

Using this jsfiddle -- https://jsfiddle.net/sz5sjxe0/ it is working for me. Can you show an example of it failing for you? — CaldwellYSR, Oct 31 '16 at 18:58
This one can be solved using the "bottom-padding hack" http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css The only issue is that padding-bottom hack cannot be applied directly to the flex-item container. There is an issue in, I believe Firefox, that means that it will be applied inconsistently. — socki03, Oct 31 '16 at 18:58
@CaldwellYSR But that `img` has a fixed size of 16:9. I'll be having images of various sizes so whatever the size of the image is, would like to keep the16:9 size for the `img`, and have its width set in full in relation to the width of the fluid container. — Jo Ko, Oct 31 '16 at 19:17
@socki03 So what would be the right approach without the hack with the flex-item container? How can I have the `img-container` be of 16:9 ratio size, always filling the 100% width of the `#fluid-container`, in relation to the size of the `#fluid-container` container? That way I can just set the width of the `img` to 100%, so it would always be of 16:9 ratio. — Jo Ko, Oct 31 '16 at 19:25
@JoKo you're saying that the original image might be square, but you still want to display it in that container at 16:9 (so that you're changing its aspect ratio and stretching it out if needed)? — andi, Oct 31 '16 at 19:37

score 0 · Answer 1 · answered Oct 31 '16 at 19:38

Ok, so I'll reply with an answer, example here: http://codepen.io/socki03/pen/dpxoao

The image itself should already be fluid based on your width: 100%, but I rewrote this to verify that the flex was working correctly, so that you image container was trying to get to 50% (note the width: 100%) on the .flex item.

HTML:

<div class="flex-container">
     <div class="flex"></div>
     <div class="flex" id="fluid-container">
         <div class="img-container">
             <img src="http://lorempixel.com/output/abstract-q-c-1600-900-5.jpg" />
         </div>
        <div class="text-container">
              I'm subtitle (Keep me below image)
        </div>
    </div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}
.flex {
  display: flex-item;
  flex: 0 1 50%;
  width: 100%;
  position: relative;
}
#fluid-container {
  margin: 0;
  padding: 0;
}

.img-container {
  margin: 5px;
  padding-bottom: 56.25%;
  positon: relative;
}

#fluid-container img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  width: auto;
}

#fluid-container .text-container {
  color: green;
  padding: 5px;
}

Before I accept the answer and upvote. I'll be having various image sizes, so I gave it a try with different image sizes, and on big pictures, the img doesn't stay contained its img-container and overlaps the `text-container` and the img goes on top of it. What could be the issue? — Jo Ko, Oct 31 '16 at 22:06

How to have maintain 2:5 ratio in div container?

1 Answers1