28209 sujets

CSS et mise en forme, CSS3

Taille image pleine hauteur : autres solutions ?

Bonsoir,

Cette question ne devrait plus être posée mais finalement, il y a toujours un cas de figure qui m'amène à la reposer.

Il s'agit donc d'un site Wordpress réalisé avec un thème premium "Salient" et qui permet théoriquement toutes les options de paramétrage de taille d'image.

Pourtant, l'options qui m'intéresse et celle par défaut (soit "full") ne permet pas de forcer la hauteur de l'image dans sa colonne" de la même manière qu'un background.

J'ai donc tenté d'appliquer :
img {
height: 100%!important; 
width: auto!important;
}

Ou encore
img{
object-fit: cover;
}


...mais sans succès

Existe t-il donc une solution CSS qui force vraiment la hauteur d'une image dans tous les cas ?
salut
pour les cover plein écran, je met

img {
height: 100%; 
width: 100%;
object-fit: cover;
}


et placé dans une div

div {
width: 100%;
height: 100vh;
overflow: hidden;
}
Administrateur
Hello,

Je me permets d'ajouter quelques précisions :
- object-fit: cover seul ne suffit pas, il faut préciser une largeur et une hauteur
- height: 100% n'a jamais été la bonne solution puisqu'un % se réfère à son propre parent et il faut donc généralement appliquer une hauteur de 100% à tout l'ensemble de la branche jusqu'à l'élément HTML
- height: 100vh est une excellente idée mais bugguée sur certains navigateurs mobiles : https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html
- height: 100dvh est le meilleur choix, sans inconvénients.

Au final (le div parent ici n'était pas nécessaire) : 


/* toute la taille de page pour une image */
.mon-image-full-screen {
  width: 100vw;
  height: 100dvh;
  object-fit: cover; /* force à conserver le ratio de l'image */
}

Modifié par Raphael (14 Apr 2025 - 09:25)
Merci beaucoup pour ces retours !

J'ai testé mais la photo qui doit occuper toute la hauteur passe en dessous de la première photo et occupe la totalité de la rangée, comme si elle était seule...

Je précise donc que dans le constructeur de page du thème, on utilise :
- une rangée (qui est paramétrée sur "Equal Height Columns" pour afficher les colonnes de la même hauteur, ce )
- deux colonnes (dont la première qui contient une photo qui occupe 2/3 de la largeur et la seconde qui contient une photo qui occupe le 1/3 restant. C'est bien cette photo qui doit occuper la même hauteur que la première)
- une image dans chaque colonne

J'ai donc appliqué sur la colonne :
.full-image-column {
width: 100%!important;
height: 100vh!important;
overflow: hidden!important;
}

et sur l'image :
.full-image-inside img {
  width: 100vw!important;
  height: 100dvh!important;
  object-fit: cover!important; /* force à conserver le ratio de l'image */
}
Administrateur
Je ne suis pas sûr de comprendre le souci.

Mais si tu veux que ta photo s'affiche par-dessus tout le contenu, il faudra la sortir du flux (position absolute ou fixed).
En fait, mon besoin reste identique et a priori simplissime, sur une rangée de 2 photos, dont une occupe 2/3 de la largeur et l'autre 1/3 de la largeur (donc actuellement plus réduite en hauteur que la première), comment faire pour que la photo la plus petite soit de la même hauteur que la plus grande et sans déformation, juste les bords recadrés bien entendu.

J'avoue que j'ai un peu basculé dans un petit cauchemar inattendu pour une question qui me semblait soldée depuis des années dans la mesure où elle conerne 100% des dév (de tous niveaux).

Depuis hier, j'ai effectué tous les tests possibles, y compris les multiples propositions chatGpt, je ne trouve aucune réponse concernant ce thème qui existe depuis des années, à croire que je suis le seul utilisateur concerné, je finir complotiste !!!

Désolé pour cet état d'âme peu constructif mais, à défaut de solution, je vais devoir finir par utiliser un background avec toutes les tares que ça suppose. La loose suprême.
Administrateur
Aaaaah mais tu ne veux pas du tout que ton image occupe 100% de l'espace dans dans la page en fait ! (Une petite illustration dès le départ aurait permis de nous guider directement vers ton besoin).

OK donc oublie tout ce qu'on t'a dit.

Pour te répondre, il faut savoir quelle est l'architecture de cette "galerie" de deux photos. La ou les solutions vont dépendre de son niveau de complexité et d'imbrication.

L'idéal étant :

<div class="parent">
  <img class="photo-1">
  <img class="photo-2">
</div>


EDIT : ce que tu veux au final c'est un truc de ce genre ?

https://codepen.io/raphaelgoetter/pen/VYwNQom?editors=1100
Modifié par Raphael (14 Apr 2025 - 16:26)
Désolé pour le temps perdu et oui, c'est exactement ce que je recherche, c'était trop simple pour qu'on puisse imaginer que qq soit bloqué sur une truc aussi basique".

Bon, comme là j'agonise, j'ai créé une page test accessible pour tenter de rattraper le temps perdu :
**URL supprimée sur demande de l'auteur**

C'est donc la photo de gauche qui devrait occuper la même hauteur que celle de droite.
C'est fou non que le thème ne le permettre pas simplement ? Smiley eek

PS : j'ai testé sur l'image :
.full-image-inside img {
    place-self: stretch!important;
    object-fit: cover!important;
}

Modifié par Raphael (14 Apr 2025 - 19:54)
Administrateur
OK, avec la structure du CMS je comprends que ça ne pouvait pas fonctionner aussi simplement.

Par exemple, la propriété `place-self` n'agira que si l'image se trouve dans un élément Grid, ce qui n'est pas le cas dans ton thème.

Il y a exactement 8 (huit) (HUIT) conteneurs autour de tes deux images. Chaque image a 4 conteneurs autour, donc lui dire de faire 100% de haut ne sert à rien : elle fait déjà 100% de la hauteur de son premier conteneur. Il faudrait agir sur le niveau n-1, mais aussi n-2, n-3 et n-4 au minimum.

En testant sur ta page directement avec les devtools, l'astuce fonctionne en procédant ainsi :
- ajouter un `height: 100%` sur tous les éléments suivants :
- .wpb_wrapper
- .img-with-aniamtion-wrap (orthographe respectée Smiley murf )
- .inner
- .hover-wrap
- .hover-wrap-inner
- sur les images en question (.full-image-inside), ajouter un `height: 100%; object-fit: cover`

Attention : parmi les classes sus-citées, je pense que certaines sont réutilisées ailleurs et qu'il ne faut surtout pas que ces styles (`height: 100%`) cassent d'autres parties du thème.

upload/1744644254-1-image.jpg
Modifié par Raphael (14 Apr 2025 - 17:33)
Ouille, j'avais un couteau dans le dos, maintenant j'ai l'impression d'avoir une hache au milieu de la tête.

Clairement, je suis impressionné par ton décryptage mais je ne vais pas me lancer dans la réécriture du code, d'autant que je n'en ai pas les compétences, et s'il n'y a pas de solution simple en CSS, je vais utiliser un background malgré toutes les tares que ça représente dans ce cas.

Je pourrai payer le support du thème pour cette seule question mais vu que ce sujet n'est abordé ni sur leurs tutos, ni sur leur forum ni nulle part d'ailleurs (ce qui me sidère encore une fois), je ne suis même pas sûr qu'il pourrait m'apporter une réponse.

Et effectivement le "aniamtion" de leur code ne serait pas des plus rassurant si ce thème n'était pas utilisé par des milliers d'utilisateurs, on peut donc imaginer que le codeur a validé son code avec.
Administrateur
goudurisc a écrit :
PS : pourras-tu supprimer mon URL qui n'était que provisoire ?
C'est fait. Bon courage pour la suite !
Prévenir un modérateur
Répondre au sujet
Aller à