2 side by side full width div tags of different widths (40%/60%) that scale down to and eventually stack at 100% width

Question

I have been trying and failing to get the following to work.

I have 2 div tags that each contain an image. Div A on the left contains an image with a native size of 768 x 400, Div B on the right has a size of 1152 x 400. So these images represent 40% width and 60% width.

I am looking to have these occupy the full width of the screen and have them scale down (still side by side at 40% and 60%) to a point, and eventually stack on top of each other at 100% full width (say at any resolution under 720px wide) yet still respecting their native aspect ratio. So the image in Div B would actually be 'shorter' than Div A at this point.

I have tried to illustrate this with the attached image.

Any assistance would be greatly appreciated.

Thanks,

https://s13.postimg.org/qq94pfq3b/2_divs.png

Answer 1

Something like this should work. Note that breakpoint for stacking these images on top of each other is at 767px which is a standard resolution where mobile css should start.

HTML:

<div class="a">
    <img src="image1.png">
</div>
<div class="b">
    <img src="image2.png">
</div>

CSS:

.a, .b { float: left; }
.a img, .b img { width: 100%; }
.a { width: 40%; }
.b { width: 60%; }

@media screen and (max-width: 767px) {
    .a, .b { width: 100%; }
}

EDIT:

I just noticed that your images don't have the same ratio. How do you expect them to be side by side the way you envisioned it, respecting their native ratio as you wrote, without one being taller than the other one?

Answer 2

You can do it with bootstrap . Here's a small snippet that can help you:

 .a { background-color: blue; height: 100px; } .b { background-color: red; height: 100px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="a col-xs-12 col-sm-5"></div> <div class="b col-xs-12 col-sm-7"></div>