28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

N'étant pas spécialiste en développement, et ayant cherché partout sur Internet, je fais appel à vous. J'essaie d'adapter l'image d'accueil de mon site web sur tous les navigateurs (taille adaptée à l'écran et image non déformée en hauteur ou largeur), ça fonctionne quasiment nickel, sauf sur un petit point.

Tout d'abord, le site en question est celui-ci : https://www.mathieudete.fr/

Mon problème est le suivant : sur Chrome, une petite bordure grise s'affiche tout autour de l'image de la page d'accueil (ici juste une partie de l'image avec la bordure entourée en rouge) :

upload/1570025130-77279-1.jpg

Sur Internet Explorer et Firefox, je n'ai pas ce soucis :

upload/1570025177-77279-2.jpg

Voici mon code :

<img class="slider-img" style="background-image:url('https://www.mathieudete.fr/wp-content/uploads/2018/04/photographe_mariage_toulouse_slider_3.jpg')" src="">


img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


Alors j'ai trouvé une solution pour ne plus que cette bordure grise s'affiche sur Chrome, c'est de fournir une valeur à mon "src" présent dans ma balise img :

<img class="slider-img" style="background-image:url('https://www.mathieudete.fr/wp-content/uploads/2018/04/photographe_mariage_toulouse_slider_3.jpg')" src="https://www.mathieudete.fr/wp-content/uploads/2018/04/photographe_mariage_toulouse_slider_3.jpg"/>




Cependant, cette modification entraîne un autre soucis, l'image est déformée sur Internet Explorer (en fonction de la taille de la fenêtre du navigateur).

Voici une fenêtre Chrome, l'affichage de l'image est adapté :

upload/1570025194-77279-3.jpg

Et sous Internet Explorer, l'image est déformée :

upload/1570025202-77279-4.jpg

Auriez-vous une idée de ce que je peux faire pour :

- ne pas avoir de bordure grise sur Chrome

- ne pas avoir l'image déformée sous IE

Merci d'avance !

Mathieu
Modérateur
Bonjour Mathieu,

Je déconseille fortement d'appliquer un background-image sur un élément img. Il faut utiliser une img avec l'attribut src, ou un div avec un background-image.

Je te suggère fortement de consulter la documentation du carrousel utilisé et trouver des démos utilisant des images.
Meilleure solution
Tony,

Merci beaucoup, j'ai remplacé ma balise img en mettant un div à la place (avec background-image), et mon soucis de bordure grise a disparu !

Merci encore.

Mathieu
Modifié par Matz52 (03 Oct 2019 - 11:24)