J’ai un peu mis à jour mon article. Essayez encore. Vous allez devoir jouer avec la taille de l’image pour l’obtenir comme vous le souhaitez. Je n’ai aucune idée de la taille que vous voulez et utiliser 300 pour tout a bien fonctionné pour moi. La taille de l’image sera une question de goût.
Je suis proche de la solution… c’est la faute de Chrome…
Apparemment, sur Safari, ça rend parfaitement - merci pour votre aide
Maintenant, la question est : pourquoi Chrome fait-il cela ?
1 « J'aime »
Je n’ai aucun problème ni sur Chrome sous Windows ni sur Safari sous iOS. J’ai utilisé les deux pour faire mes captures d’écran et mes publications. Essayez le code mis à jour que j’ai posté. Il pourrait résoudre le problème.
même problème…
quel problème ? le problème de dimensionnement de Chrome ?
Désolé pour mon manque de clarté ; le problème est que lorsque j’utilise mon navigateur principal (Chrome), je ne vois pas le logo dans le pied de page. Lorsque j’utilise Safari, je peux voir les logos dans le pied de page. J’ai également essayé d’utiliser Chrome sur le MacBook de ma petite amie, et cela a bien fonctionné pour elle ; nous pouvons voir les logos dans le pied de page. Il y a donc peut-être quelque chose d’étrange avec mon Chrome ; je n’en ai aucune idée.
J’ai également remarqué que sur le téléphone, le format n’est pas correctement mis à l’échelle - savez-vous comment corriger cela ?
voulez-vous que les images rétrécissent et s’agrandissent avec la taille de l’écran ? vous pouvez également créer un pied de page différent pour la vue mobile ou simplement placer le pied de page en vue de bureau. vous remarquerez qu’il y a des sections dans l’écran d’édition HTML/CSS pour le bureau et le mobile, avec les mêmes onglets que la section commune.
vous allez probablement devoir expérimenter avec le HTML de dimensionnement des images. vous voudrez probablement utiliser un dimensionnement relatif en pourcentage, mais les images sont de tailles différentes, il sera donc difficile de le faire, à moins que vous n’ayez toutes des images de même taille. je ne suis pas très clair sur ce que vous voulez.
1 « J'aime »
quelqu’un ici, bien plus intelligent que moi, a suggéré que vous devriez peut-être vérifier en mode de navigation privée du navigateur pour exclure que des extensions ne causent des problèmes.
Je vous suggère de redimensionner les images à des dimensions similaires avec lesquelles vous pouvez travailler, puis d’utiliser les différentes sections CSS et PIED DE PAGE pour vues de bureau et mobiles afin d’obtenir ce que vous recherchez.
1 « J'aime »
Oui, désolé de ne pas avoir été clair, j’aimerais qu’ils aient les logos qui s’adaptent à la taille de la fenêtre, aussi bien pour le bureau que pour le mobile.
(utiliser le mode incognito était une idée brillante 
)
Salut Michele,
Pourrais-tu essayer le code suivant ?
HTML (j’ai supprimé les attributs width des images et ajouté une classe wrap au conteneur) :
<div class="wrap custom-footer-image">
<a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
<a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
<a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
<a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
CSS :
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
flex: 1;
text-align: center;
img {
max-width: 100%;
}
}
}
Comment cela s’affiche sur ordinateur :
Sur mobile :
Qu’en penses-tu ?
La mise en page mobile pourrait être changée en deux colonnes de deux images si elles sont trop petites sur mobile.
4 « J'aime »
Ça fonctionne parfaitement, merci à tous pour votre excellent soutien !
2 « J'aime »
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.