큰 이미지, 오른쪽 내용의 크기 유지

Question

두 가지 크기의 이미지 (세로 및 가로)가 있습니다. 항상 같은 크기가됩니다. 이미지를 보유하지만 내용을 밀어 넣지 않고 유사한 높이 또는 너비를 유지하는 컨테이너를 만들려고합니다. 나는 또한 이미지를 풀 사이즈로 보여주고 싶지 않아서 overflow:hidden을 사용하려고 생각하고 있었다. 여기 JSFiddle에서 시도했지만 컨테이너가 늘어납니다. 어떤 도움을 주셔서 감사합니다.

<div> 
    <span class="mixSpanLeft"> 
    <a href="somePlace.html"><img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" /></a> 
    </span> 
    <span class="mixSpanRight"> 
    <p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes? Should I have completely different styles for them? 
    </p> 
    </span> 
</div> 

http://jsfiddle.net/hmjoLmej/4/

Answer 1

어떻게 이런 일에 대해.

float 대신에 더 적절한 flexbox을 사용 했으므로 레이아웃을 더 잘 제어 할 수 있습니다.

이미지가 스케일, 클립에 더욱 제어 할 background를 사용하여 추가 등

참고 p들이 (인라인 요소 임) span 어린이 안된다 블록 요소이기 때문에, 그래서 난 당신이 마크 업에 이미지 소스를 추가하는 방법을 보여주는 div

업데이트와 마크 업/CSS를 업데이트

,

.wrapper { 
 
    display: flex; 
 
} 
 

 
.mixSpanLeft { 
 
    width: 50%; 
 
    background-color: #abc; 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
    background-size: cover; 
 
} 
 

 
.mixSpanLeft a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.mixDivRight { 
 
    width: 50%; 
 
    background: #def; 
 
} 
 

 
.mixDivRight p { 
 
    padding: 2%; 
 
}

<div class="wrapper"> 
 
    <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)"> 
 
    <a href="somePlace.html"></a> 
 
    </span> 
 
    <div class="mixDivRight"> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)"> 
 
    <a href="somePlace.html"></a> 
 
    </span> 
 
    <div class="mixDivRight"> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    </div> 
 
</div>