11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Hauteur de div responsive

Bonjour,

J'essaye d'obtenir un design fluide vertical pour un projet, mais les comportements css fluides qui fonctionnent horizontalement, ne marche pas toujours verticalement.

Ma problèmatique: faire se réduire un rectangle homothétiquement, quand on réduit la hauteur du navigateur

Je cherche un code javascript qui produise le même effet sur les images que la page 'Afficher l'image' dans Firefox.

mon HTML/CSS : 

<!doctype html>

<head>
<script src="js/action.js"></script> 

<style type="text/css">
html {
 height: 100%;
}
body {
 height: 100%;
}
#Container {
 height: 100%;
 display: table;
 overflow: hidden;
}
#Container > div {
 display: table-cell;
 height: 100%;
 vertical-align:middle;
}
.page {
    background-color: #0033FF;
    display: table-cell;
    height: 100%;
    padding: 10px;
}
</style>
</head>

<body>
<div id="Container">
 <div>
    <div class="page"><div class="case"><img src="img/uneimage.jpg"></div></div>
 </div>
</div>
</body>




Voici le JS :
 var hscreen = (document.body.clientHeight);
  var maxHeight = 230;
  var widthCase = $(this).width();    // Current image width
  var heightCase = $(this).height();  // Current image height
  var ratio = widthCase / heightCase;  
  
$( window ).resize(function() {  
 $('#mon_rectangle').each(function() {

  
  if(hscreen > maxHeight){
   $(this).height(maxHeight); // Set new width
        }

 else {
  $(this).height(hscreen);
    widthCase = width * ratio;
}


Je pense que mon code est bancal car ça ne marche pas.
Merci de m'aider à résoudre ce problème.
Bonjour, je l'aurais personnelemtn plus mis comme ceci



var maxHeight = 230;
$( window ).resize(function() {   

    //(document.body.clientHeight); n'a pas l'air top
    var hscreen = $(window).height(),
    height = hscreen > maxHeight ? maxHeight : hscreen;
    $('#mon_rectangle').height(height);
});
Merci qualithras, j'ai pas tout compris (le rôle du '?') mais ça fonctionne chez moi,
J'aime le côté synthétique de ton code.
Sujet clos
Aller à