Redimensionner un DIV avec plusieurs images sur la fenêtre redimensionner

Question

J'ai donc 5 images triangulaires imbriquées les unes à côté des autres dans un div. Je veux simplement que les images soient redimensionnées lors du redimensionnement de la fenêtre, ou que je garde juste un peu de rapport d'aspect sur différentes résolutions. J'ai actuellement des largeurs fixes mais 100% ouvertes à des méthodes alternatives pour que cela fonctionne ou même la bonne façon de le faire.

HTML

<div id="projects"> 

    <div id="project_1"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_2"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_3"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_4"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_5"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 
</div> 

CSS

body { 
    background-color: #1b1b1b; 
    margin: 0; 
    padding: 0; 
    overflow: hidden ; 
    position: relative; 
    -webkit-transition: left .2s ease; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    width: 9800px; 
} 

#projects { 
    padding-top: 3.085%; 
} 

#project_1, #project_2, #project_3, #project_4, #project_5 { 
    float: left;  
} 


#snitch { 
    width: 1960px; 
} 

.tribox1 { 
    background-repeat: no-repeat; 
    background-position: bottom; 
    padding-top: 5px; 
} 

.tribox2 { 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin-left: -498px;  
} 

.tribox3 { 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-left: -501px;  
} 

.tribox4 { 
    background-repeat: no-repeat; 
    background-position: right center; 
    margin-left: -500px; 
} 

.tribox5{ 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    margin-left: -464px; 
    padding-top: 51px; 
} 

Answer 1

Il semble que votre recherche d'une mise en page fluide et (oserais-je dire) un 'responsive design' - mettre votre conteneur à la largeur : 100% et définissez vos images pour flotter: gauche, largeur: 20%, hauteur: auto; Si vous avez une taille maximale pour le conteneur, définissez max-width sur le conteneur à cette taille.

Answer 2

Si vous voulez redimensionner les images utiliser le code ci-dessous ..

$(window).resize(function() { 
    var h = parseInt($(window).height(), 10); 
    var w = parseInt($(window).width(), 10); 
    $("img").css({ 
     'width': w, 
     'height': h 
    }); 
});