画像の垂直高さ

Question

私は自分のライトボックスを作成しようとしています、そして今私は、設計部に立ち往生しています、私は_私は

<div class="gallery"> 
    <div class="container"> 
     <span class="centerer"></span> 
     <div> 
      <img src="http://images.car.bauercdn.com/pagefiles/18474/bmw_7-series_05.jpg"> 
     </div> 
    </div> 
    <a class="arrow left" href="#"> 
     <span class="centerer"></span> 
     <img src="http://i.imgur.com/GbeQojB.png" /> 
    </a> 
    <a class="arrow right" href="#"> 
     <span class="centerer"></span> 
     <img src="http://i.imgur.com/GbeQojB.png" /> 
    </a> 
</div> 

たいような水平応答画像でスライドボックスを作成するために、マネージャーをしました

a { 
    text-decoration: none; 
} 

.gallery { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: #333; 
} 

.container { 
    width:80%; 
    height:100%; 
    position:absolute; 
    left:10%; 
    text-align: center; 
} 

.container div { 
    display:inline-block; 
    width:95%; 
} 

.centerer { 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 

img { 
    vertical-align: middle; 
    display: inline-block; 
    max-width: 100%; 
    max-height: 100%; 
} 

.arrow { 
    width:10%; 
    height:100%; 
    display:block; 
    position:fixed; 
    text-align: center; 
} 

.arrow img { 
    display:inline-block; 
    opacity:0.5; 
    width:50%; 
} 

.arrow:hover img { 
    opacity:1; 
} 

.arrow.left { 
    transform: rotate(180deg); 
    left:0; 
} 

.arrow.right { 
    right:0; 
} 

https://jsfiddle.net/4zpk43f2/

が、私は垂直写真とそれを使用する場合、それは...吸います。 私はいくつかのディスプレイ設定を変更しようとしましたが、縦または横に適しています。あなたのコードで

https://jsfiddle.net/d470vkc9/1/

Answer 1

、あなたは.containerにwidth: 80%を適用することにより、80%に画像の幅を制限しました。あなたは同じにheight: 100%を与えました。そのため、画像は垂直方向に完全に伸びていたのです。 .containerと同じように、身長は80%となります。

これを試してみてください：

.container { 
    height: 80%; 
    top: 10%; 
    /* other styles */ 
} 

.container > div { 
    height: 100%; /* or less as you prefer */ 
} 

Working Fiddle