同じ高さ画像とテキスト

Question

画像divの高さをテキストの横にする方法はありますか？

私はブログの投稿要素を設計していますが、左にテキストがあり、右にイメージがありますが、テキストとイメージは見た目が良くない特定の解像度では消えてしまいます。私が今考えることのできる最も良いことは、画像に静的な高さを与えることですが、それは実際に問題を解決するものではなく、サイズを変更するときにかなり違和感のある別のブレークポイントに異なる高さを設定する必要があります。

私はこれの外観をエミュレートしようとしています：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

現在地フレキシボックスと背景画像との正しい軌道に乗っています。いくつかのことがあなたを捨てています。まず、画像のdivをピクセルの高さに設定していることです。それはFlexboxの等しい高さの列をオフにします。もう一つは、コンテナ内部のdivのマージンがその高さに向かっていることです。したがって、CodePenでは、段落には1em 0emのネイティブマージンがあり、それはその列の最後の項目であるため、右側の列の高さが一致しています。