画像を反応的に埋め込む

Question

2つのサイドバイサイドdiv（小さな画面に積み重ねられている）、テキスト付きのdiv、画像全体が埋め込まれたdivを持つcss3対応テクニックを探しています。少なくとも、画像のアスペクト比は維持されなければならない。理想的には、両方のdivは常に同じサイズの正方形でなければなりません（スタックされている場合でも）。

編集 - フィドル：

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

私はフレキシボックスを使用して道の一部を取得することができます。

ブラウザウィンドウがしかし、成長

、画像が伸びます：

は最低でも、私はアスペクト比がしたいこれは、理想的な状況の出発点であります維持された。画像が切り取られても問題ありませんが、理想的には四角形を四角形（画像とテキストの両方）として成長させ、画像を比例的にサイズ変更したいと考えています。

ここで私は、静止画像のdivとテキストのdivは完璧な正方形のままにしたい、しかしで：水平方向のスペースが縮小したdivを積層得るとき今、画像が再び引き伸ばされ

：最低限のアスペクト比は、次のように、理想的

を維持しなければなりません

私はflexboxやこれまでの技術を使うことができますが、これはかなり互換性があり、出血性がないようにする必要があります（オブジェクトフィッティングはあまりにも未来的です）。

は、同様の質問hereとhereがあり、彼らは近くに来るが、（この特定の問題を解決しない。）ん

Answer 1

編集？ fiddleはうまく動作しますか？背景とオブジェクトフィットが答えではない、あなたは「フレックス使用したいDは、私が最もよく信じるならば

はさておき正方形の画像と中心コンテンツとそれを開始することです。

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>