ウィンドウでdivメニューを縮小する

Question

ウィンドウサイズを縮小するメニューを作成しようとしていますが、％を使用してサイズを変更するための幅を得ましたが、高さでは機能しないようです。

私はmax-width/heightを使用してautoに設定しようとしました。私が高さをpxから％に変更するたびに、それは完全に消えます。

CodePen：http://codepen.io/mikegr/pen/WRdNqo

HTML

<ul class="ch-grid"> 
     <li> 
      <div class="ch-item ch-img-1"> 
       <div class="ch-info"> 
        <h3>Games</h3> 
        <p> 
         by Bill Hicks <a href="http://www.iristimes.com">Quickly! go there now</a> 
        </p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="ch-item ch-img-2"> 
       <div class="ch-info"> 
        <h3>Illustration</h3> 
        <p> 
         by Steven Wright <a href="http://www.independent.ie ">Captain Semantics</a> 
        </p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="ch-item ch-img-3"> 
       <div class="ch-info"> 
        <h3>Characters</h3> 
        <p> 
         by Johnny Vegas <a href="http://www.examiner.ie ">Lovable Mentalist</a> 
        </p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="ch-item ch-img-4"> 
       <div class="ch-info"> 
        <h3>Modelling</h3> 
        <p> 
         by Benedict Cumberbatch <a href="http://www.dribbble.com">Smartypants Himself</a> 
        </p> 
       </div> 
      </div> 
     </li> 
    </ul> 

CSSあなたは、たとえば、あなたの.ch-grid liにスケーラブルな高さを必要とする

.ch-grid { 
    margin: auto 0 0 0; 
    padding: 0; 
    text-align: center; 
} 

.ch-grid li { 
    width: 12%; 
    height: 220px; 
    display: inline-block; 
    margin: 0 auto; 


} 
.ch-item { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    position: relative; 
    cursor: default; 
    box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); 
    transition: all 0.4s ease-in-out; 
} 
.ch-img-1 { 
    background-image: url(http://images.clipartpanda.com/smiley-face-clip-art-ncEepeEcA.png); 
    background-size:  cover;      
    background-repeat: no-repeat; 
    background-position: center center; 

} 

.ch-img-2 { 
    background-image: url(http://i.ebayimg.com/images/a/T2eC16VHJHgE9n0yFjGLBP+DueFzkQ~~/s-l300.jpg); 
    background-size:  cover;      
    background-repeat: no-repeat; 
    background-position: center center; 
} 

    .ch-img-3 { 
     background-image: url(http://images.clipartpanda.com/smiley-face-png-happy_face_Clip_Art.png); 
    background-size:  cover;      
    background-repeat: no-repeat; 
    background-position: center center; 

} 
.ch-img-4 { 
    background-image: url(http://pix.iemoji.com/images/emoji/apple/ios-9/256/extraterrestrial-alien.png); 
    background-size:  cover;      
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.ch-info { 
    position: absolute; 

    width: inherit; 
    height: inherit; 
    border-radius: 50%; 
    opacity: 0; 
    transition: all 0.4s ease-in-out; 
    transform: scale(0); 
    -webkit-backface-visibility: hidden; 
} 
.ch-info h3 { 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 20px; 
    margin: 0 30px; 
    padding: 45px 0 0 0; 
    height: 140px; 
    font-family: 'Open Sans', Arial, sans-serif; 
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); 
} 
.ch.info p { 
    color: #fff; 
    padding: 10px 5px; 
    font-style: italic; 
    font-size: 12px; 
    border-top:1px solid rgba(255,255,255,0.5); 
    opacity: 0; 
    transition:all 1s ease-in-out 0.4s; 
} 
.ch-info p a { 
    display: block; 
    text-decoration: none; 
    color: #fff; 
    color: rgba(255,255,255,0.7); 
    font-style: normal; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 9px; 
    letter-spacing: 1px; 
    padding-top: 4px; 
    font-family: 'Open Sans', Arial, sans-serif; 
} 
.ch-info p a:hover { 
    color: #fff222; 
    color: rgba(255,242,34, 0.8); 
} 
.ch-item:hover .ch-info { 
    transform: scale(1); 
    opacity: 1; 
} 
ch-item:hover .ch-info p { 
    opacity: 1; 
    } 

Answer 1

ビューポート単位vh

.ch-grid li { 
    width: 12%; 
    height: 50vh; 
    display: inline-block; 
    margin: 0 auto; 
} 

Updated codepen

あなたがパーセントを使用したい場合は、この

html, body { 
    height: 100%; 
} 
.ch-grid { 
    margin: auto 0 0 0; 
    padding: 0; 
    text-align: center; 
    height: 100%; 
} 

.ch-grid li { 
    width: 12%; 
    height: 50%; 
    display: inline-block; 
    margin: 0 auto; 
} 

Updated codepen 2

のように、だけでなく、すべての .ch-grid li両親に高さを与える必要が