css - 力の高さイメージに合わせる

Question

<div>画像が並んでいるレスポンシブページを作成しています：

画像の幅と高さはプロポーションを維持し、ブラウザー ウィンドウで拡大/縮小します。

幅は<div>同じですが、高さはイメージに合わせたいと思います。

これを達成する方法はありますか？問題のフィドルは次のとおりです。http://jsfiddle.net/alecrust/xwJHw/

Answer 1

これにはdisplay：tableプロパティを使用できます。このように書いてください：

section{
    display:table;
    width:100%;
}
.text-box,.image{
    display:table-cell;
    vertical-align:top;
}

これをチェックしてくださいhttp://jsfiddle.net/xwJHw/8/

注：display：tableは、IE8以降まで機能します。

Answer 2

jQueryを使用できます。

$('#imgId').height() を使用して画像の高さを計算し、同じ値を Div に設定します。

コードも参照してください。ここで高さを調整する方法http://filamentgroup.com/examples/equalHeights/

Answer 3

編集:

@alecrust:これは優れたソリューションであり、フィドルにも実装されています。こちらを参照してください

純粋な css ソリューション:デモを見る

CSS:

#wrapper {
    overflow: hidden;
    background: #ccc;
}

.placeholder_image {
    float: left;
    width: 430px;
    height: 264px;
    background: #fff;
    padding: 0 20px 0 0;   
}

.placeholder_text {
    background: #ccc;
    margin-left: 450px;
    display: block;
}

HTML:

<div id="wrapper">
    <div class="placeholder_image">
        <img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
    </div>

    <div class="placeholder_text">
        A block of text
    </div>
</div>

</p>

</p>