28112 sujets

CSS et mise en forme, CSS3

Bonjour, je suis sur le point de finir un site pour un client. J'ai fait l'intégralité du site sur Webflow puis j'ai exporté le code pour faire quelques améliorations avec un éditeur de texte.

Le site est en ligne, mais les images sur certaines pages ne s'affichent pas lorsque la page se charge. Ces images marchent normalement quand j'ouvre le site en local.

Autre information, quand je suis sur l'inspecteur et que je vais sur ces images (qui ne s'affichent pas), que je décoche et recoche "position: relative", alors ces images s'affichent. Ces images peuvent donc s'afficher correctement, ce n'est pas un problème de chemin.

Lien d'une page du site avec ce problème : http://rivetac.com/accessoires.html


Si quelqu'un sait comment régler ce problème je lui en serais vraiment reconnaissant !
Modérateur
Bonjour,

dans l'inspecteur, on voit une position une coordonnée top , il suffit à priori de la commenter:
(rivetac.webflow.css ligne 1592)
.image-18 {
  position: absolute;
  /*! top: -180px; */
  width: 100%;
  height: auto;
}


Pour clipper une image en conservant un ratio d'affichage , il y a aujourd'hui les règles
https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio
https://developer.mozilla.org/fr/docs/Web/CSS/object-fit et https://developer.mozilla.org/fr/docs/Web/CSS/object-position qui peuvent être plus aisées à manipuler .

Cdt
Modifié par gcyrillus (29 May 2022 - 16:50)
Meilleure solution