高ベースのディスプレイを使用して、垂直配向、パーセンテージベースIMG：テーブル/テーブルセル

Question

Iは、以下の基準を満たしている周知のメディアオブジェクトの変異体作成だ：

• コンテナ要素を明示的な高さは、すべての子どもの
• 身長パーセントベース
• Image要素は、私がdisplay: table/-老後を使用してい

垂直配向することができるはずであるべき設定されています以下のようなアプローチ：

<div class="o-media"> 
    <div class="o-media__img"> 
    <!-- begin picture component --> 
    <div class="c-picture"> 
     <div class="c-picture__container"> 
     <picture class="c-picture__el"> 
      <source media="(min-width: 1024px)" srcset="https://www.topoutshoes.com/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/_/1/_11_1_7.jpg" class="c-picture__source"> 
      <img src="http://shopshoeguru.com/sites/default/files/image/shoeguru-banner-red.png" class="c-picture__img _o-media__image--overview-01" alt="Overview 1 photo"> 
     </picture> 
     </div> 
    </div> 
    <!-- end picture component --> 
    </div> 

    <div class="o-media__body"> 
    <!-- some copy and such --> 
    </div> 
</div> 

とCSS：CSS内の私のコメントで述べたように、https://jsfiddle.net/v9gf3c9a/

問題です：

* { 
    border: 1px solid red; 
} 

.o-media { 
    height: 550px; 
} 

    .o-media__body { 
    height: 50%; 
    } 

    .o-media__img { 
    height: 50%; 
    } 

    ._o-media__image--overview-01 { 
    /* want to be able to set this using percentage! */ 
    height: 200px; 
    } 

.c-picture { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

    .c-picture__container { 
    display: table-cell; 
    vertical-align: middle; 
    } 

    .c-picture__el { 
    display: inline-block; 
    } 

    .c-picture__source { 
    display: none; 
    } 

    .c-picture__img { 
    display: block; 
    } 

ここでのアクションでこのコードのjsfiddleですdisplay: tableとdisplay: table-cellの使用のため、パーセンテージベースの高さを考慮しないため、imgの高さを明示的に設定する必要があります。私が通常のdisplayの値を使用すると、blockとinline-blockのように、imgのパーセンテージが正常に動作します。

は、私がimgにパーセンテージを使用していますが、まだdisplay: table/table-cell経由vertical-alignを使用できるように、これを実現する方法はありますか？

Answer 1

これはどう：

* { 
    border: 1px solid red; 
} 

.o-media { 
    height: 550px; 
} 

    .o-media__body { 
    height: 50%; 
    } 

    .o-media__img { 
    height: 50%; 
    } 

    ._o-media__image--overview-01 { 
    /* want to be able to set this using percentage! */ 
    height: 100%; 
    position: absolute; 
    } 

.c-picture { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

    .c-picture__container { 
    display: table-cell; 
    vertical-align: middle; 
    height: 100%; 
    } 

    .c-picture__el { 
    display: inline-block; 
    position: relative; 
    height: 80%; 
    } 

    .c-picture__source { 
    display: none; 
    } 

    .c-picture__img { 
    display: block; 
    height: 100%; 
    } 

代わりにあなたはフレックスコンテナに​​で、フレキシボックスを使用することができます。