image - 以响应方式用图像填充 div

Question

我正在寻找一种 css3 响应技术，它有两个并排的 div(堆叠在较小的屏幕上)，一个带有文本，另一个完全填充图像。至少，必须保持图像纵横比；理想情况下，两个 div 应始终是相同大小的正方形(即使堆叠时也是如此)。

编辑 - 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  */

我可以得到一些使用 flexbox 的方法。这是起点，理想情况:

然而，当浏览器窗口变大时，图像会被拉伸(stretch):

至少，我希望保持纵横比。如果图像被剪裁没关系，但理想情况下我希望正方形增长为正方形(图像和文本)，以便图像按比例调整大小。

现在，当水平空间缩小并且 div 堆叠时，图像再次被拉伸(stretch):

这里我还是希望图片div和文字div保持正方形，但至少要保持长宽比

理想情况下，像这样:

我可以使用 flexbox 或任何更早的技术，但我需要它是相当兼容的，而不是前沿的(例如，对象适合似乎太 future 主义了)。

还有类似的问题here和 here , 他们接近了，但确实(没有解决这个具体问题。)

Answer 1

edit ?? your fiddle works fine ?!

如果背景和对象适合不是答案，并且您想使用 flex，我认为最好是从方形图像开始并将内容放在一边。

您可以使用 mediaquery 来切换 div 的显示行为并重置顺序。

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>