ビューポートの高さでdivを動的に圧縮するにはどうすればよいですか？

私はかなり基本的な質問であると感じるものに対する答えを探していましたが、コードについて何が間違っているのか分かりません。私はPHPでブートストラップライブラリを使用したプロジェクトを持っており、目的はビューポート内のページにすべてのコンテンツを収めることです。私が間違っていることに関する解決策やアドバイスについて誰かが助けてくれることを願っていました。含まれるコードはギャラリーセクションで、水平方向に圧縮する間に垂直方向に圧縮する必要もあります。ビューポートの高さでdivを動的に圧縮するにはどうすればよいですか？

HTML：

<div class="wrapper"> 
    <div class="row"> 
    <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
     <a target="_blank" href="img_fjords.jpg"> 
     <img src="images/test1.jpg"> 
     </a> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
     <a target="_blank" href="img_forest.jpg"> 
     <img src="images/test1.jpg"> 
     </a> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
     <a target="_blank" href="img_lights.jpg"> 
     <img src="images/test1.jpg"> 
     </a> 
    </div> 
    </div> 


    <div class="row"> 
     <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
      <a target="_blank" href="img_mountains.jpg"> 
      <img src="images/test1.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
      <a target="_blank" href="img_mountains.jpg"> 
      <img src="images/test1.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-4 col-sm-4 col-md-4 gallery"> 
      <a target="_blank" href="img_mountains.jpg"> 
      <img src="images/test1.jpg"> 
      </a> 
     </div> 
    </div> 
</div>

CSS：

<head> 
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<!-- personal CSS --> 
<style> 

.wrapper{ 
height: 100vh; 
width: 100vw; 
} 

.gallery { 
background-color: #000000; 
padding: 0; 
margin: 0; 
    } 

.gallery:hover { 
z-index: 2; 
} 

.gallery img:hover { 
-webkit-box-shadow: 0px 0px 48px 22px rgba(222,222,222,1); 
-moz-box-shadow: 0px 0px 48px 22px rgba(222,222,222,1); 
box-shadow: 0px 0px 48px 22px rgba(222,222,222,1); 
transform: scale(1.1,1.1); 
-moz-transform: scale(1.1,1.1); 
-webkit-transform: scale(1.2,1.1); 
-o-transform: scale(1.1,1.1); 
-ms-transform: scale(1.1,1.1); 
opacity: 1; 
} 

.gallery img { 
margin: 0; 
padding: 0; 
-moz-transition: all 0.3s; 
-webkit-transition: all 0.3s; 
transition: all 0.3s; 
width: 100%; 
height: 100%; 
opacity: .5; 
} 

div.desc { 
padding: 15px; 
text-align: center; 
} 

</style>

出典

2017-09-06 Matt Morgan

あなたはフィドルやCodepenにMCVE例を投稿することができますか？ https://jsfiddle.net/sebdum/wctffuh3/1/

は、それは非常に単純です：あなたが提供したものを、私はこのフィドルを作ってみたで

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

.wrapper { 
    width: 100%; 
    height: 100wh; 
} 

.div { 
    background: red; 
    float: left; 
    border: 1px solid black; 
    width: 25%; 
    height: 33vh; 
}

しかし、あなたは、iPhone 5などの小さいデバイスを認識する必要があります有効な垂直解像度は568pxです。これは、各divを小さくすることになります。また、動的実装ではおそらくJSを含むより複雑な解決策が求められるため、これは幾分明らかです。

出典

2017-09-06 13:29:22

私はxsスクリーンに別の例外を追加しますが、これを実装することができた後、この問題の場合、常に6つのアイテムがあります –

6つのアイテムしか必要ない場合は、33.33％の幅各divには50vhの高さが2行あります。これらの例が役に立つとわかった場合は、回答を受け入れたものとしてマークしてください。 –

さて、私はこのアプローチを試してみましたが、サイズ変更のために働いています。問題は、画面上で水平に並べるために、浮動させる必要があります（浮動小数点：左）。ホバリング時にイメージのサイズが大きくなると、スタック上のそれ以上の要素が重なることになります。何かアドバイス？ –

ビューポートの高さでdivを動的に圧縮するにはどうすればよいですか？

答えて

関連する問題