Discussion :

[laurentSc]

Bonjour,
je ne parviens pas à rendre mon image responsive : https://pasdpanique.fr
Il s'agit de l'image "agréé certibiocide".

code de a.propos.php :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h1>Pas d'Panique : Désinsectisation de nids de guêpes et de frelons sur le plateau du Vercors ou aux environs de Grenoble</h1>
<section class="propos">
    <article>
        <h2>Qui sommes-nous ?</h2>
        <p><strong>Pas d'panique - guêpes & frelons</strong> est une entreprise de désinsectisation dans le Vercors et environs de nids de
            guêpes ou de nids de frelons ou autres hyménoptères, située à Autrans-Méaudre (38880) dans le Vercors nord.</p>
        <p>Suite à des arrêtés préfectoraux, la destruction des nids d’hyménoptères est une compétence qui ne
            relève
            plus des pompiers. Ces prestations sont maintenant confiées à des professionnels de la
            désinsectisation.
        </p>
        <p>L'activité a été créée suite à l'arrivée du frelon asiatique sur le plateau du Vercors en 2020.</p>
        <p> Arnaud Brun a effectué une formation <a
                href="https://www.actu-environnement.com/blogs/marie-pierre-maitre-elise-merlant/212/maitre-merlant-certibiocide-entree-vigueur-distributeurs-utilisateurs-produits-biocides-303.html"
                target="_blank" alt="Lien vers un site d'information sur le certificat CertiBiocide"
                rel="noopener">CertiBiocide</a> pour utiliser le traitement le plus adapté. Il a aussi effectué
            une formation de destruction de nid de frelons asiatiques, qui fait partie des nuisibles envahissants.
            Celle-ci a été organisée par le FRGDS (Fédération régionale des groupements sanitaires) Auvergne
            Rhône-Alpes.
        </p>
        <img class="certibiocide" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
    </article>
    <img src="/assets/images/Illustration-2-272x300.webp" alt="Illustration d'un agent de désinsectisation"> <!-- la méthode est appelée par index.php, à la racine-->
</section>

CSS associé :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Section à propos */
 
.propos {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
 
.propos p{
    color:black;
}
 
.propos article {
    width: 70%;
}
 
.propos img {
    width: 25%;
    padding-left: 3rem
}
 
img.certibiocide {
    width: 25%;
    display: block;
    margin: auto;
}

Quand je regarde ce que dit l'inspecteur, les width:25% sont barrés.

Avez vous une idée ?

[laurentSc]

On peut simplifier le code html ; ça ne changera rien :

Code html :

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

1
2
3
4
5
6
7
8
9
<h1>Pas d'Panique : titre</h1>
<section class="propos">
    <article>
        <h2>Qui sommes-nous ?</h2>
        <p>texte        </p>
        <img class="certibiocide" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
    </article>
    <img src="/assets/images/Illustration-2-272x300.webp" alt="Illustration d'un agent de désinsectisation"> 
</section>

et c'est plus clair.

https://pasdpanique.fr/debug

[ProgElecT]

Salut

Avec ton dernier lien sur iphone X pas de problème, le responsive fonctionne.

[Doksuri]

je confirme, ton dernier lien, en mode responsive, fonctionne correctement

[laurentSc]

Merci pour vos confirmations mais comme ce n'est pas le cas sur mon iPhone 8, j'ai demandé à 3 autres personnes de vérifier...

[NoSmoking]

Bonjour,

je ne parviens pas à rendre mon image responsive

il serait bon que tu définisses clairement ce que tu entends par là car tu as une règle @media qui prend le dessus sur ta width:25% !

Code :

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

1
2
3
4
5
6
@media screen and (max-width: 1100px) {
    .propos img {
        width: auto;
        padding: 0;
    }
}

... il est donc normal que tes width:25% soient barrés.

[laurentSc]

Pour 2/3 des personnes interrogées, l'image est non-responsive.

Du coup, j'ai fait une recherche Google : "image responsive codepen" (j'aime bien les codepen car ça fournit un code et y a plus qu'à copier-coller).
Une des réponses était "bootstrap image responsive". Comme souvent, le code proposé par bootstrap est bien et que ce framework CSS est déjà présent sur mon site, je m'y suis intéressé. Et ça semble bon !

Code html :

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

<img class="img-responsive" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
/* sitepoint: Bootstrap uses a class of .img-responsive to make any image responsive: */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
 
 img {
    max-width: 100%;
    height: auto;
    padding-left: 3rem;
}

j'ai supprimé du CSS tous les media querys...

EDIT : j'avoue ne pas comprendre pourquoi ça marche. Je comprend que display: block; permet de fixer une largeur ou une hauteur (si on laisse l'image inline, pas possible) et max-width: 100%; fait que la largeur va s'adapter au conteneur mais quel est le rôle de height: auto; ?
Et dans img{}, on veut agir sur la largeur et la hauteur, alors que img est un élément inline...Comment expliquer ?

https://pasdpanique.fr/debug

[NoSmoking]

Et dans img{}, on veut agir sur la largeur et la hauteur, alors que img est un élément inline...Comment expliquer ?

un élément <img> est un élément remplacé et même si par défaut sa propriété display par défaut est inline il est traité comme un élément inline-block ce qui permet de le dimensionner et ainsi de prévoir la place qu'il va occupé au sein du document lors du chargement pour éviter notamment que cela « saute » dans tout les sens.