コンテナ内の高さの異なる画像を作成する

Question

コンテナ内に3枚の画像があります。 2つの画像は同じ高さを共有し、もう1つはやや高めです。ユーザーが画面のサイズを変更すると、3つの画像すべてを縮小しながら現在の比率を維持する方法を教えてください。

HTML

<div class='wrapper-inner panel centered green'> 
<section class='content'> 
    <article class='full'> 
    <h2>Title of section four.</h2> 
    <div class="phone-container"> 

     <img src='http://placehold.it/276x490' class="phone-1 desktop" style="border: 1px solid blue;" /> 
     <img src='http://placehold.it/320x516' class="phone-2" style="border: 1px solid red;" /> 
     <img src='http://placehold.it/276x490'class="phone-3 desktop" style="border: 1px solid blue;" /> 

    </div> 
    </article> 
</section> 

CSS

.desktop { 
    display: none; 
} 

@media only screen and (min-width: 768px) { 
    .phone-container { 
    margin: 0 auto; 
    position: relative; 
    } 
    .phone-container img { 
    display: inline-block; 
    margin-bottom: -1px; 
    margin-top: 0 !important; 
    position: relative; 
    max-width: 320px !important; 
    } 
    .phone-container .phone-1 { 
    width: 276px; 
    -webkit-transform: translate(50px, 0); 
    transform: translate(50px, 0); 
    z-index: 2; 
    position: relative; 
    } 
    .phone-container .phone-3 { 
    width: 276px; 
    -webkit-transform: translate(-50px, 0); 
    transform: translate(-50px, 0); 
    z-index: 2; 
    position: relative; 
    } 
    .phone-container .phone-2 { 
    width: 320px; 
    z-index: 3; 
    position: relative; 
    } 
    .centered { 
    text-align: center; 
    } 
} 

私jsFiddleあなたは私がお互いにアンダーラップ二つの外側の画像を持つインライン画像を表示していることがわかりますから、中間の画像。これは、ブラウザのウィンドウがモバイルクエリーが開始されるまで小さくなるときに維持したいポジショニングです。

Answer 1

おそらくパーセント幅を使用することができますか？あなたの入力のための

Like this

@media only screen and (max-width: 968px) { 
    .phone-container { 
    margin: 0 auto; 
    position: relative; 
    } 
    .phone-container img { 
    display: inline-block; 
    margin-bottom: -1px; 
    margin-top: 0 !important; 
    position: relative; 
    max-width: 30% !important; 
    } 
    .phone-container .phone-1 { 
    width: 20%; 
    -webkit-transform: translate(50px, 0); 
    transform: translate(50px, 0); 
    z-index: 2; 
    position: relative; 
    } 
    .phone-container .phone-3 { 
    width: 20%; 
    -webkit-transform: translate(-50px, 0); 
    transform: translate(-50px, 0); 
    z-index: 2; 
    position: relative; 
    } 
    .phone-container .phone-2 { 
    width: 25%; 
    z-index: 3; 
    position: relative; 
    } 
    .centered { 
    text-align: center; 
    } 
}