28234 sujets

CSS et mise en forme, CSS3

[Résolu] Retour à dimension d'origine après «resize» par le visiteur.

Bonjour,
Dans une page, j'ai défini des images avec la propriété resize=both pour permettre aux visiteurs de les afficher à leur convenance.
Comment faire pour qu'en cliquant sur une image "resizée" elle reprenne sa dimension d'origine, sans pour autant recharger toute la page ?
Merci d'avance pour vos idées.
Bonjour,

Tu va devoir utiliser javascript pour ça, je te conseillerai de bien mettre les width et height comme attribut de tes images, pour que tu aies les bonnes dimensions d'origine (et en plus ça plait aux navigateurs).
Pense à mettre un peu de code la prochaine fois, pour que l'on puisse te répondre plus rapidement, et surtout ici, plus précisément.
Sur Firefox, si tu double-cliques sur le coin en bas à droite, ça remet la taille d'origine.
Essaie avec les autres navigateurs.
Voici le code du test que je viens de faire avant de répondre:

<!DOCTYPE html>
<html>
    <head>
        <style> 
            div {
                border: 2px solid;
                padding: 20px; 
                width: 300px;
                resize: both;
                overflow: auto;
            }
            img {width:100%;}
        </style>
    </head>
    <body>

        <p><b>Note:</b> Internet Explorer does not support the resize property.</p>
        <div>
            <img src="http://zeffiro.free.fr/images/zeffiro.gif"/>
        </div>
    </body>
</html>

Note: je ne crois pas que mettre width et height dans les balises img soit la chose à faire ACTUELLEMENT.
Dans le passé, ça ne servait pas à grand chose, sauf à accélérer un peu l'affichage lorsque l'image est grande et met du temps à se charger. De nos jours, c'est contre productif compte tenu des différentes tailles d'écran de nos appareils d'affichage.
Hi,
@PapyJP
Ah, c'est ballot, je n'avais pas pensé à double-cliquer sur la zone «à points»; mon problème est résolu. Merci.
@SolidSnake
Je ne suis qu'un webeur du dimanche (à mon avis pas loin de l'âge de PapyJP ...) et j'ai défini un width: 100%, pour que l'image remplisse le bloc ce qui m’interdit de modifier ce width avec une fonction JS par la suite.
Pour ce qui est du code, il ressemble à cela :
<!DOCTYPE html>
<head>
<style>
/* ----------- Placer une image horizontale à gauche dans la page ----------- */
.imghorgauche {
  float: left; 
  width: 300px; 
  height: 200px; 
  margin: 10px 20px 6px 10px; 
  padding: 10px; 
  resize: both; -moz-resize: both; -webkit-resize: both; -ms-resize: both;
  overflow:auto; /* */
} 
.imghorgauche img {width: 100%; }
/* Dimensions des blocs des images réduites overridant celles du css global   */
.blocimgdimensions {
  width: 203px;
  height: 151px; 
  border-width: 1px 2px 2px 1px ;
  border-style: solid;
  border-color: MidNightBlue; 
  border-radius: 5px; 
  background-image: url("../../images/fond_text_clair.bmp");
}
.blocimgdimensions img {
  border: 1px solid MidNightBlue; 
} 
/* ----------- Légendes des images de la page accueil, notamment ------------ */
p.legendecentree { 
  margin: 0; padding: 0; text-indent: 0;   font-size: 0.8em; 
  background: none ; 
  text-align: center; 
} 
</style>

<script type="text/javascript">
<!--  Fonction rechargeant la page afin de restaurer la dimension des images -->
  function RestaurePage() {
    location.reload();
  }
</script>  
</head>

<body>
    <div class="imghorgauche blocimgdimensions imgsanstextemargegauche">
			<img src="images/4052lesbrisantsdesetauxpargro.jpg"
					 onclick="RestaurePage()"
					 alt="Les Brisants des &Eacute;taux par gros Temps"
					 title="Les Brisants des &Eacute;taux par gros Temps" />
			<p class="legendecentree">Les Brisants des &Eacute;taux par gros Temps</p>
    </div>  
</body>
</html>

Merci de ton intervention.
Bonjour,
telliak a écrit :

@SolidSnake
[...] j'ai défini un width: 100%, pour que l'image remplisse le bloc ce qui m’interdit de modifier ce width avec une fonction JS par la suite.

Ah oui, mais tu avais précisé que c'était les images qui avait le resize, pas un bloc parent !
(donc comme indiqué un peu plus haut, un peu de code aurait sympa)
Mais je vois que tu utilises quand même du JS, pour recharger ta page, chose que tu voulais justement éviter...
Je suis un peu perdu... Enfin bref, c'est résolu...

EDIT :
PapyJP a écrit :
Note: je ne crois pas que mettre width et height dans les balises img soit la chose à faire ACTUELLEMENT.
Dans le passé, ça ne servait pas à grand chose, sauf à accélérer un peu l'affichage lorsque l'image est grande et met du temps à se charger. De nos jours, c'est contre productif compte tenu des différentes tailles d'écran de nos appareils d'affichage.

Au temps pour moi, je croyais que c'était toujours d'actualité. Smiley confused Après je ne vois pas non plus en quoi ce serait contre productif, il s'agissait juste de mettre la taille d'origine de l'image, après le CSS fait son boulot.
Modifié par SolidSnake (21 Oct 2015 - 08:28)
SolidSnake a écrit :
Après je ne vois pas non plus en quoi ce serait contre productif, il s'agissait juste de mettre la taille d'origine de l'image, après le CSS fait son boulot.

Voici ce que j'ai constaté: si tu mets la taille de l'image dans la balise, le navigateur prend cette taille comme obligatoire et donc l'image ne sera pas recalculée en fonction de la taille de l'écran. En conséquence si tu affiches la page sur un téléphone ou une tablette, le navigateur prend l'option de calculer la page en absolu puis de réduire l'échelle de la page pour que ça tienne, le résultat étant qu'on ne peut plus lire le texte qui devient trop petit.
Maintenant il se peut que mon interprétation soit erronée, mais j'ai supprimé toute dimension en pixels dans mes nouvelles pages, je mets des %.
Bonjour

C'est étonnant ce que tu dis, car de mon côté j'ai constaté autre chose :
- parfois au bout de plusieurs refresh certaines images disparaisse littéralement lorsqu'il n'y a pas les dimensions en html de précisé. => ça j'ai jamais compris pourquoi !
- pour utiliser un lazy maison (chargement des images au scroll), j'utilise des data-width et data-height. ça me permet justement d'éviter d'avoir tout mon contenu qui prend la place de mon image et qui se superpose les un sur les autres ( vu avec une connexion très faible débit). Après, il est possible en css d'avoir la main sur ces images. Par exemple, si j'ai à la base une image de 300px, j'indique un max-width:300px et un width:100%, puis height en auto.
Après peut-être qu'il y a une meilleur méthode
Re,
SolidSnake a écrit :
Bonjour,
Ah oui, mais tu avais précisé que c'était les images qui avait le resize, pas un bloc parent !
(donc comme indiqué un peu plus haut, un peu de code aurait sympa)

Tu as raison, mais bloc ou image, je ne vois pas la différence.
SolidSnake a écrit :
Mais je vois que tu utilises quand même du JS, pour recharger ta page, chose que tu voulais justement éviter...

Non, un peu de JS ne m'effraie pas et je ne crois pas avoir écrit vouloir l'éviter.
Bonjour,

telliak a écrit :
Tu as raison, mais bloc ou image, je ne vois pas la différence.

Il y a pourtant plusieurs grosses différences, à commencer par le rendu CSS des blocs html (block, inline, inline-block...).
La balise <img> est véritablement un cas à part. Ainsi, nous ne retrouvons pas par exemple les mêmes attributs sur les balises, la balise alt est uniquement pour les images, et l'attribut title pour les liens. (et donc pas de title sur les <img> !).
D'autres petites différences sont à noter sur la balise <img> comme l'impossibilité d'utiliser les pseudo-classes :before et :after...
telliak a écrit :
Non, un peu de JS ne m'effraie pas et je ne crois pas avoir écrit vouloir l'éviter.

Je parlais du fait de recharger la page que tu voulais éviter, pas le JS.
Sujet clos
Aller à