Comment obtenir div compresser dynamiquement avec la hauteur de la fenêtre?

J'ai cherché une réponse à ce que je ressens est une question assez simple, mais je ne peux pas comprendre ce qui ne va pas avec le code. J'ai un projet utilisant la bibliothèque bootstrap avec php et le but est d'adapter tout le contenu de la page dans la fenêtre, et j'espérais que quelqu'un pourrait m'aider à propos de la solution ou de tout conseil sur ce que je fais de mal. Le code inclus est la section de la galerie et pendant qu'il se comprime horizontalement j'ai aussi besoin de compresser verticalement.Comment obtenir div compresser dynamiquement avec la hauteur de la fenêtre?

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>

Source

2017-09-06 Matt Morgan

Pouvez-vous poster un MCVE exemple sur Fiddle ou Codepen?

Avec ce que vous avez fourni, je suis venu avec ce Fiddle: https://jsfiddle.net/sebdum/wctffuh3/1/

Il est assez simple:

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

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

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

Mais vous devez être conscient des appareils plus petits, tels que l'iPhone 5, qui a une résolution verticale effective de 568px, ce qui rendrait chaque div plutôt petit. Aussi, de manière assez évidente, cela ne fonctionne qu'avec un nombre connu d'éléments, car l'implémentation dynamique recherche une solution plus complexe, impliquant éventuellement JS.

Source

2017-09-06 13:29:22

Je vais ajouter une exception distincte pour les écrans xs, mais après que je suis en mesure d'implémenter cela, et dans le cas de ce problème il y aura toujours six éléments –

Si vous avez besoin de seulement six éléments, vous pouvez utiliser 33.33% de largeur sur chaque div et 50vh hauteur pour deux lignes. Si vous avez trouvé ces exemples utiles, veuillez marquer la réponse comme acceptée. –

Oui j'ai essayé cette approche et cela fonctionne pour le redimensionnement, le problème que je rencontre est que pour les aligner horizontalement à travers l'écran j'ai besoin de les faire flotter (float: left) et quand vous flottez des éléments z-index ne s'applique pas, donc quand les images augmentent de taille en vol stationnaire tout élément au-dessus de la pile se chevauchera. Aucun conseil? –

Comment obtenir div compresser dynamiquement avec la hauteur de la fenêtre?

Répondre

Questions connexes