반응 형 방식으로 이미지로 div 채우기

Question

두 개의 side-by-side div (텍스트가 포함 된)와 전체적으로 이미지로 채워진 두 개의 side-by-side 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 */ 

나는 인 flexbox를 사용하는 방법 몇 가지를 얻을 수 있습니다.

브라우저 창 그러나 성장

, 이미지가 늘어나지 :

는 최소한 내가 가로 세로 비율이 원하는 이것은 이상적인 상황 출발점이다 유지. 이미지가 잘리는 경우에는 문제가 없지만 사각형을 이미지 및 텍스트 용 사각형으로 성장시켜 이미지 크기가 비례 적으로 조정되도록하는 것이 이상적입니다.

수평 공간 축소와 div를 쌓아받을 때 이제 이미지가 다시 뻗어 있습니다 : 여기

난 여전히에서 이미지 div의 텍스트 div를 완벽한 사각형을 유지하기를 원하지만 적어도 종횡비 같이,

이상적

유지해야

필자는 flexbox 또는 이전 기술을 사용할 수 있지만이 기술은 호환이 가능해야하며 출혈이 아닌 것이 좋습니다 (예 : 객체 적합성은 너무 미래가 보입니다).

비슷한 질문 here 및 here있다, 그들은 가까이 오지하지만 (이 특정 문제를 해결할 수 없습니다.) 않는

Answer 1

편집? fiddle 잘 작동합니까?! 배경과 객체 맞는 대답하지 않고 당신이 '플렉스 사용하고 싶습니다, 내가 가장 믿는다면

옆으로 정사각형 이미지 중심의 콘텐츠와 함께 시작하는 것입니다.

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>