Discussion :

[ghohm]

Bonjour,

est-ce possible ?

J'ai en effet une page composée de 4 <div> et je souhaite que les médias (image, vidéo ou flash) que je mets dedans, ne déforment pas la taille fixe (en pixels) de mes <div>.

Pour les vidéos : pas de problème ! Les dimensions des lecteurs vidéos étant prédéfinies en taille fixe (en pixels), les vidéos se redimensionnent proportionnellement à la taille du lecteur (apparition d'un bandeau noir dans l'espace vide).

Pour les animations flash : pas de problème (idem que pour les vidéos) !

Le problème est donc uniquement pour les images. Je voudrais en fait qu'elles prennent le maximum de place au sein de mon <div> (mon conteneur), mais de manière proportionnelle (comme pour les deux autres types de média) !? Et ce sans le déformé, ni que les images s'affichent dans une dimension supérieure à celle d'origine.

Pour résumé ... soit 100% de la taille de l'image, soit 100% de la taille de l'intérieur de mon conteneur, si celle-ci est plus grande que la dimension intérieure de mon <div> (conteneur) !

[blueice]

Tu as donné toi même réponse ! :-)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="toto.jpg" height="100%" width="100%" alt="toto" />

Maintenant pour limiter au maximum de la taille d'origine, il faut déjà connaitre d'avance la taille, donc on rentre dans du dynamique, donc tu dois utiliser un langage qui te permette de connaitre les dimensions de ton image ou alors tu verrouilles ton div à une certaine dimension qui n'engendrera pas un grosse déformation.

[ghohm]

Dans un premier temps, je devais malheureusement faire fonctionner mon script sans langage dynamique, en attendant, j'ai donc trouver une astuce ("dysfonctionne" uniquement sous IE) !!!

Pour les images HAUTES :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="toto_1.jpg" alt="toto_1" class="image_haute"/>

Pour TOUTES LES AUTRES images (généralement les images sont plutôt carrées ou rectangles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="toto_2.jpg" alt="toto_2" class="image"/>

Le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.image {
    height: ;
    width: 100%;
}
.image_haute {
    height: 100%;
    width: ;
}

Oui, j'ai osé faire un code ne respectant pas les standards !!!

A la limite, il aurait été possible de mettre ça dans un commentaire conditionnel, mais tant qu'à faire un truc sale ... autant y aller jusqu'au bout !

De rien ... Gôm !