같은 높이 이미지 및 텍스트

Question

이미지 div 크기를 높이려면 텍스트의 높이를 지정하는 방법이 있습니까?

왼쪽에 약간의 텍스트가 있고 오른쪽에 이미지가있는 블로그 포스트 요소를 디자인하고 있지만 텍스트와 이미지는별로 좋지 않은 특정 해상도에서 벗어납니다. 내가 지금 생각할 수있는 가장 좋은 점은 이미지를 정적 높이로 지정하는 것 뿐이지 만 문제를 실제로 해결하지는 못한다. 크기를 조정할 때 꽤 다른 junky를 보일 수있는 다른 중단 점에 대해 다른 높이를 두어야 만한다. https://www.lonelyplanet.com/france/paris#survival-guide (스크롤 '최근 문서'섹션)

HTML

<div class="recent-petra"> 
    <div class="petra-content"> 
    <h4>Petra</h4> 
    <cite>Oct. 4</cite> 
    <p class="recent-desc">Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p> 
    </div> <!-- petra-content --> 
    <div class="petra-img"></div> 
    </div> 

CSS

.recent-petra { 
display: flex; } 

.petra-content { 
width: 60%; 
margin: 0 5%; } 

.petra-img { 
width: 20%; 
background-image:  url('http://4.bp.blogspot.com/_qWovdGs59MY/RykS9HDQGMI/AAAAAAAAAJo/s79SRNqRNok/s400/Petra+1.jpg'); 
height: 300px; 
margin: 0 5%; } 

:이의 모습을 모방하려고

codepen은 여기에 있습니다 : http://codepen.io/reskk/pen/ozPwAw - p 당신이 내가 말하는 것에 대한 시각적 인 예를 얻을 수 있도록 많은 돈을 버는 것이 좋습니다.

내 말은 .. CSS로 할 수있는 것입니까? 내가 엄청난 고통을 느끼고 싶습니다. 즉, 적절한 크기의 이미지 등을 찾아야합니까? 아니면 CSS를 사용하여이를 수행 할 수 있습니까?

본질적으로 이미지 높이가 텍스트 옆의 높이에 따라 크기가 조정되어 멋지고 반응이 좋기를 바랍니다.

덕분에, Reskk

Answer 1

당신이 언급이 사이트는 이미지에 대한 다양한 중단 점에서 고정 된 높이를 사용합니다. 그것은 실제로 이미지를 수행하는 표준 방법입니다 (다른 방법은 높이를 만드는 것입니다. 내 경험으로 보면 특정 중단 점에서 그림이 너무 작아집니다.) 가로 대칭이 아닌 대각선으로 조정됩니다 (너비가 반응합니다).

텍스트로 이미지를 확대하려면 미디어 쿼리를 사용하여 중단 점을 사용해야합니다. 다양한 중단 점에서 이미지의 높이와 내용의 텍스트가 변경됩니다. 미디어 쿼리에 대한 자세한 내용은

@media (min-width: 0px) and max-width(400px){ 

img{ 
width:40% 
height:200px; 
} 

#divcontainingtext{ 
font-size:14px; 
} 
} 

@media (min-width: 401px) { 
/* insert new fixed height and new font-size here */ 
} 

은 다음을 참조하십시오 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

현재 위치 인 flexbox 및 배경 이미지와 올바른 궤도에있어. 두 가지가 당신을 버리고 있습니다. 첫째, 픽셀 높이로 이미지 div를 설정했습니다. 그러면 Flexbox의 높이가 같은 열이 나옵니다. 두 번째는 컨테이너 내부 div의 여백이 높이로 계산된다는 것입니다. 따라서 CodePen에서 단락의 기본 여백은 1em 0em이며, 해당 열의 마지막 항목이므로 오른쪽 열의 높이가 일치합니다.