28172 sujets

CSS et mise en forme, CSS3

Redimensionnement d'images de manière fluide selon la résolution

Bonjour à vous !
Je fais un site au design un peu particulier : en horizontal et redimentionnable (donc positionnement absolu et pourcentages, etc), et ce positionnement me pose un petit problème.
Je dois mettre dans le bandeau central un carrousel. Au départ c'était en flash mais on galère alors on teste sans, et ici c'est un carrousel avec jQuery (la chouette bibliothèque javascript). Mais j'aimerais que le carrousel (blanc) prenne toute la hauteur du bandeau (jaune pâle), et que les images qui le composent suivent : et surtout que ceci soit valable quelle que soit la résolution... et surtout surtout que les images suivent (je me répète, je sais, mais c'est là mon problème principal).

Quelqu'un aurait-il une idée ?

Merci d'avance.

Voilà le lien vers la page en cours : http://akaiken.free.fr/clepsydre/testnoflash/N1.php
Modifié par AkaiKen (17 Mar 2010 - 11:20)
Tu parle de redimensionnement fluide des images mais c'est le contraire que tu demandes. Ton bandeau a une hauteur fixe donc si tu veux que les images prennent toujours toutes la hauteur du bandeau elles doivent avoir une taille fixe aussi.

Ce que je ferais c'est fixer la taille des images et plutôt jouer sur l'espacement entre elles (pour qu'il soit fluide). Et je fixerai la taille minimale du design à 1024 pixels (un peu moins, en fait : 980).
Mon bandeau n'a pas une hauteur fixe Smiley biggrin sa hauteur est de 30% de l'écran (donc sa hauteur en pixels varie suivant les résolutions). Si je mets la taille des images à 100% (de leur espace réservé), elles dépassent...
OK, donc plutôt partir sur une hauteur en pourcentage pour les images et des marges fluides pour la largeur. Toujours en fixant une largeur mini.
Modifié par jb_gfx (17 Mar 2010 - 11:24)
En fait, ce qui m'ennuie c'est que si je mets un height: x% dans mon img, cela redimensionne l'image à x% de sa hauteur : et donc ce sera fixe, cela dépendra uniquement de sa taille initiale... Si elle fait 200px sur 200px en tant que fichier, lui dire height: 80% reviendra à en faire une image apparente de 160px de hauteur.

Je pense que le souci vient du fait que mon design est en position: absolute avec des hauteurs en pourcentage : si je prend ma fenêtre et que je diminue sa hauteur, les bandes se redimensionnent mais pas les images (qui vont commencer à changer de taille uniquement si je change la largeur de la fenêtre).

Je n'ai pas très bien saisi ton message sur les "marges fluides pour la largeur" : je ne gère pas les marges entre les images, c'est le carrousel qui s'en occupe - je peux chercher à surcharger, ceci dit.
Oh, excellente idée, mais dans ce cas, mon bandeau central ne pourrait pas avoir de hauteur s'il est vide (ce qui pourrait arriver). Et surtout, il y aura des objets dans la partie supérieure.

Mais merci d'avoir proposé Smiley smile
salut,

et avec ça ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<style type="text/css">

html, body { width: 100%;
	     height: 100%;
	     margin: 0;
	     padding: 0;
	     overflow: auto;
	   }

div.header { width: 100%;
	     height: 30%;
	     margin: 0;
	     padding: 0;
	     position: absolute;
	     top: 0;
	     left: 0;
	     background-color: magenta;
	   }

div.carrousel { width: 100%;
		height: 40%;
		position: absolute;
		top: 30%;
		left: 0%;
		background-color: yellow;
	      }

div.footer { width: 100%;
	     height: 30%;
	     margin: 0;
	     padding: 0;
	     position: absolute;
	     top: 70%;
	     left: 0;
	     background-color: blue;
	    }

div.bd_h { width: 100%;
	   height: 5%;
	   margin: 0;
	   padding: 0;
	   background-color: brown;
	 }

div.slide { width: 100%;
	    height: 90%;
	    margin: 0;
	    padding: 0;
	  }

div.bd_b { width: 100%;
	   height: 5%;
	   margin: 0;
	   padding: 0;
	   background-color: brown;
	 }

ul.jcarousel-skin-tango { height: 99%;
			  margin: 0;
			  padding: 0;
			  list-style-type: none;
			}

ul.jcarousel-skin-tango li { height: 99%;
			     margin: 0;
			     padding: 0;
			     display: inline;
			   }

img { height: 100%;
      margin: 0 0 0 10px;
      padding: 0;
    }


</style>

<body>

<div class="header"></div>

<div class="carrousel">

   <div class="bd_h"></div>

   <div class="slide">

      <ul id="mycarousel" class="jcarousel-skin-tango">

	 <li>
	    <img src="http://digimon.neoseeker.com/w/i/digimon/7/71/Gabumon.jpg" alt="" />
	    <span class="seconde-ligne">item 1</span>
	 </li>

	 <li>
  	   <img src="http://digimon.neoseeker.com/w/i/digimon/b/b0/Biyomon.jpg" alt="" />
	    <span class="seconde-ligne">item 2</span>
	 </li>

	 <li>
	    <img src="http://digimon.neoseeker.com/w/i/digimon/6/61/Palmon.jpg" alt="" />
	    <span class="seconde-ligne">item 3</span>
	 </li>

      </ul>

   </div>

   <div class="bd_b"></div>

</div>

<div class="footer"></div>

</body>
</html>
Sujet clos
Aller à