fill a div with an image in a responsive way - image

Question

I am looking for a css3 responsive technique to have two side-by-side divs (stacked on smaller screens), one with text, the other one filled entirely with an image. At minimum, the image aspect ratio must be maintained; ideally both divs should always be squares of the same size (even when stacked).
Edit - fiddle:
https://jsfiddle.net/marekjedlinski/zdwdhLmg/
html:
<div class="outer outer-left">
<div class="inner inner-text inner-text-left block-orange">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
</div>
<div class="inner inner-img">
<img src="image-1-300.jpg" />
</div>
</div>
<div class="outer outer-right">
<div class="inner inner-img">
<img src="image-2-300.jpg" />
</div>
<div class="inner inner-text inner-text-right block-green">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
</div>
</div>
css:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
font-size: 18px;
margin: 0;
}
.outer {
display: flex;
flex-direction: row;
}
.outer-left {
flex-wrap: wrap-reverse; /* when wrapped, image must sit on top of text */
}
.outer-right {
flex-wrap: wrap;
}
.inner {
flex: 1 1 300px; /* grow, shrink, basis */
}
.inner-img {
background: #563D7C;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.inner-img img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
/* below only text styling for text divs, not relevant */
I can get some of the way using flexbox. This is the starting point, the ideal situation:
When the browser window grows however, the images get stretched:
At minimum, I want the aspect ratio to be maintained. It's OK if the image gets clipped, but ideally I would like the squares to grow as squares (both for image and text), so that the image would be proportionally resized.
Now, when horizontal space shrinks and the divs get stacked, the images are again stretched:
Here i still want the image divs and the text divs to remain perfect squares, but at the very least the aspect ratio must be maintained
Ideally, like this:
I can use flexbox or any earlier techniques, but I need this to be fairly compatible, not bleeding-edge (object-fit seems too futuresque, for example).
There are similar questions here and here, and they come close, but do (not solve this specific issue.)

Answer 1

edit ?? your fiddle works fine ?!
if background and object-fit is not the answer and you 'd like to use flex, i believe best is to start with square image and center content aside it.
You can use mediaquery to switch display behavior of divs and reset order.
here is an example:
/* ================================== */
/* DEMO USING A SINGLE FLEX CONTAINER */
/* ================================== */
/* use your own tags, class and sizes */
/* ================================== */
div {
display: flex;
flex-wrap: wrap;
width: 80%;
min-width: 300px;
max-width: 800px;
margin: auto;
}
div > * {
flex: 1 1 340px;
min-width: 50%;
}
div > div {
background: green;
display:flex;
align-items:center;
padding: 1em;
margin: 0;
box-sizing: border-box;
color:white;
}
div div:first-of-type {
order: -1;
background:rgb(148, 98, 39);
}
div:before {
content: "";
display:inline-block;
vertical-align:middle;
padding-top: 100%;
width:0;
}
div p {
display:inline-block;
vertical-align:middle;
max-width:99%;
}
#media screen and (max-width:866px) {
div div , div div:first-of-type {display:block;order:0;}
}
<div>
<img src="http://lorempixel.com/300/300/cats">
<div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p></div>
<img src="http://lorempixel.com/300/300/animals">
<div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p></div>
</div>