Discussion :

[pol2095]

Bonjour,

quand j'essaie d'agrandir une image

Code :

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

1
2
3
4
img {
    transform: scale(1.2);
    transform-origin: top left;
}

Code HTML :

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

<img src="https://gabarit.developpez.be/images/logo-dvp-h55.png"/>test

l'image ne s'adapte pas au layout
ce comportement est normal apparemment mais ça pose problème, le mot "test" est en partie caché par l'image
existe-il une solution pour que l'image redimensionnée s'adapte au layout ?

merci

[NoSmoking]

Bonjour,

existe-il une solution pour que l'image redimensionnée s'adapte au layout ?

je ne comprend pas le concept de layout dans ton cas, à préciser donc !?!

[pol2095]

on va prendre l'exemple d'une div, si on place une image de 48x55 dans une div, l'élément div (qui est le layout) prend la hauteur de 55 px

Code HTML :

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

1
2
3
4
<div>
<img src="https://gabarit.developpez.be/images/logo-dvp-h55.png"/>
</div>
mon texte en-dessous

par contre, si j'ajoute

Code :

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

1
2
3
4
5
6
<style type="text/css">
img {
    transform: scale(1.8);
    transform-origin: top left;
}
</style>

la hauteur de ma div fait toujours 55px mais la hauteur de mon image fait 99px
du coup mon texte en-dessous chevauche l'image

voilà mon problème

[NoSmoking]

Comme tu l'as écrit :

ce comportement est normal apparemment mais ...

donc si cela ne te convient pas il ne faut pas l'utiliser et passer par la propriété height de l'image pour que son conteneur s'adapte à sa hauteur.

Code css :

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

1
2
3
.zoom img {
  height: 99px;
}

Code html :

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

1
2
3
<div class="zoom">
  <img src="https://gabarit.developpez.be/images/logo-dvp-h55.png"/>
</div>

mais cela dépendra bien sûr du besoin réel !

[pol2095]

le besoin réel est que ça s'applique à toutes les images de mes pages, pas seulement une image.
"scale" ne réalise qu'un redimensionnement cosmétique, il ne modifie pas le layout qui l'englobe, c'est quand même incroyable qu'en CSS il n'existe pas une propriété qui le permette ?
j'utilise d'autres logiciels qui utilisent des conteneurs pour la mise en page, c'est la première fois que je vois une propriété "scale" qui ne modifie pas le conteneur...

[NoSmoking]

c'est quand même incroyable qu'en CSS il n'existe pas une propriété qui le permette ?

Il va falloir t'y faire, le CSS n'est pas un logiciel mais un langage de mise en forme et les spécifications ont justement prévues de ne pas modifier le conteneur lors d'une transformation par scale ou autres.
C'est une effet de rendu qui ne doit pas détériorer la mise en page initiale.

[pol2095]

J'avais demandé à tout hasard, je connaissais déjà la réponse.