Ich habe meinen Beitrag ein wenig aktualisiert. Versuchen Sie es erneut. Sie müssen mit der Bildgröße experimentieren, um sie so zu gestalten, wie Sie sie möchten. Ich habe keine Ahnung, welche Größe Sie möchten, und die Verwendung von 300 für alle hat für mich gut funktioniert. Die Bildgröße wird eine Frage des Geschmacks sein.
Ich bin der Lösung nahe … es ist Chromes Fehler…
Anscheinend sieht es in Safari perfekt aus - danke für deine Hilfe
Nun zur Frage: Warum macht Chrome das?
1 „Gefällt mir“
Ich habe keine Probleme unter Windows Chrome oder iOS Safari. Ich habe beide benutzt, um meine Screenshots und Posts zu machen. Versuchen Sie den aktualisierten Code, den ich gepostet habe. Er könnte es beheben.
Gleiches Problem…
Welches Problem? Das Chrome-Größenproblem?
Entschuldigen Sie, dass ich mich unklar ausgedrückt habe; das Problem ist, dass ich, wenn ich meinen Hauptbrowser (Chrome) benutze, das Logo in der Fußzeile nicht sehen kann. Wenn ich Safari benutze, kann ich die Logos in der Fußzeile sehen. Ich habe auch versucht, Chrome auf dem MacBook meiner Freundin zu benutzen, und es hat für sie gut funktioniert; wir können die Logos in der Fußzeile sehen. Es könnte also etwas Seltsames mit meinem Chrome sein; ich habe keine Ahnung, was.
Ich habe auch bemerkt, dass das Format auf dem Handy nicht richtig skaliert ist - wissen Sie, wie man das beheben kann?
Möchten Sie, dass die Bilder mit der Bildschirmgröße schrumpfen und wachsen? Sie können auch eine andere Fußzeile für die mobile Ansicht erstellen oder die Fußzeile einfach in der Desktop-Ansicht platzieren. Sie werden feststellen, dass es in der Bearbeitungsansicht für HTML/CSS Abschnitte für Desktop und Mobilgeräte gibt, mit denselben Tabs wie im gemeinsamen Abschnitt.
Sie werden wahrscheinlich mit der HTML-Größenanpassung von Bildern experimentieren müssen. Wahrscheinlich möchten Sie relative Größen in Prozent verwenden, aber die Bilder sind alle unterschiedlich groß, daher wird es schwierig, es sei denn, Sie haben alle Bilder in der gleichen Größe. Ich bin mir nicht wirklich sicher, was Sie möchten.
1 „Gefällt mir“
Jemand hier, der viel intelligenter ist als ich, schlug vor, dass Sie es vielleicht im Inkognito-Modus des Browsers überprüfen sollten, um auszuschließen, dass Erweiterungen dort Probleme verursachen.
Ich schlage vor, dass Sie die Bilder auf ähnliche Abmessungen skalieren, mit denen Sie arbeiten können, und dann die verschiedenen Desktop- und Mobilansicht-CSS- und FOOTER-Abschnitte verwenden, um das zu erhalten, was Sie suchen.
1 „Gefällt mir“
Ja, Entschuldigung, dass ich mich nicht klar ausgedrückt habe. Ich möchte, dass die Logos mit der Fenstergröße skaliert werden, sowohl für den Desktop als auch für Mobilgeräte.
(Die Verwendung des Inkognito-Modus war eine brillante Idee :))
Hallo Michele,
Könnten Sie bitte den folgenden Code ausprobieren?
HTML (Ich habe die width-Attribute der Bilder entfernt und dem Container eine wrap-Klasse hinzugefügt):
<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%;
}
}
}
Wie es auf dem Desktop angezeigt wird:
Auf Mobilgeräten:
Was denken Sie?
Das mobile Layout könnte in zwei Spalten mit jeweils zwei Bildern geändert werden, wenn sie auf Mobilgeräten zu klein sind.
4 „Gefällt mir“
Es funktioniert perfekt, vielen Dank an alle für die großartige Unterstützung!
2 „Gefällt mir“
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.