28172 sujets

CSS et mise en forme, CSS3

[Résolu] Hauteur d'image relative à sa largeur

Bonjour,

Soit une image de 600 pixels de large par 90 de haut.

Elle est placée dans un <DIV> et sa largeur fera 100% de l'espace disponible dans son son contenant. Si je réduis la largeur de la fenêtre, l'image suivra, et sa hauteur se réduira en proportion. C'est très bien comme ça. Et pour cela il n'y a pas besoin de spécifier la hauteur de l'image.

L'ennui est que durant la fraction de temps nécessaire au chargement de cette image, elle a une hauteur nulle, dont le navigateur ne tiendra compte qu'une fois l'image chargée. Une fois l'image lue le navigateur déplacera donc vers le bas tout ce qu'il avait commencé à afficher.

Je cherche donc un moyen de "réserver" la hauteur nécessaire, quelle que soit la largeur disponible de la fenêtre. Ce qui ne peut pas être une hauteur fixe. L'idéal serait que la hauteur soit exprimée sous forme de proportion non pas du contenant lui-même, mais de la largeur de cette image.

Quelqu'un aurait-il un bon conseil, ou l'adresse d'une saine lecture à ce sujet ?

Merci d'avance et bonne fin de journée.
Administrateur
Bonjour,

Pas ce que tu recherches mais pour info : pour 100% du viewport (de la fenêtre), il y a les unités vw et vh. 100vh = la hauteur de ta fenêtre et surtout ici 100vw = la largeur de la fenêtre donc 90/600*100 => height: 15vw; ferait l'affaire. EDIT: et vmin et vmax
MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Si le conteneur a une largeur inconnue mais que ton image a un ratio connu (90/600), il y a l'astuce du padding vertical en pourcentage : le padding vertical en % fait référenceà la largeur de l'élément (et pas à la hauteur).
Exemple : https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
C'est l'astuce qu'on utilise pour avoir des éléments carrés (j'arrive pas à trouver de lien correct, mes talents de recherche se rouillent…) avec padding-bottom: 100%;.
Modifié par Felipe (05 Jun 2019 - 14:20)
Merci à tous les deux (Felipe et aliasdmc). Vos solutions ont en commun le padding ( top ou bottom) proportionnel à la largeur, et les positions (relative et absolute) respectivement du contenant et du contenu.

Cette solution fonctionne, mais je trouve qu'il serait pratique que le CSS fournisse une propriété de height en relation avec la largeur de l'élément.

On peut dire en général que la hauteur d'un élément est plus compliquée à fixer que sa largeur.

Merci en tout cas pour votre retour rapide et salutaire.
Administrateur
Figer les choses en CSS, c'est rarement suivi de bonnes nouvelles Smiley ravi (sans même parler de zoom texte et d'accessibilité mais déjà les traductions, les images qui changent plus tard et les wording itou, le responsive en dehors de iPhone-iPad-desktop fullHD)

Avant (le RWD) on utilisait l'attribut img[ height] mais ça c'était avant©
Tu peux fixer un min-height à peu près ou plusieurs min-height dans quelques MQ bien ciblées (iPhone et iPad par exemple).
Un reflow n'est pas bloquant, ça ne me choque pas qu'il n'y ait pas un truc prévu.
Encore qu'avec background-size: contain/cover, avec object-fit et l'élément picture qui te permet de varier les images selon des conditions à ta sauce, CSS propose déjà pas mal de possibilités je trouve.

EDIT2: Related https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/
Modifié par Felipe (06 Jun 2019 - 11:26)
Sujet clos
Aller à