CSS Hilfe - Design

    Hallo,
    hab nun eine echte Herausforderung.
    Ich wurde von einem Freund gefragt, ob ich ihm auf seiner Seite einen Teaser einbaue.
    Er hat ein super altes Theme, ich zieh ihn gerne irgendwann mal um, muss aber noch nicht sein.
    Heisst nun: ich habe ein Widget auf der Startseite "Meine Bilder". Habe dort ein Bild "Coming Soon" reingeladen, leider wird das Bild nicht groß angezeigt. Ich hätte es gerne so breit wie die Spalte angezeigt.
    Ich finde den notwendigen CSS Code nicht...
    Kann mir jemand weiterhelfen?
    Daaaanke!
    Hier die Seite: https://www.mattiontour.de/
    Viele Grüße! marco

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von mteepee

    Ich hätte es gerne so breit wie die Spalte angezeigt.


    Wenn du die Breite erhöhst, wird auch die Höhe erhöht, das Bild wird dann riesig. Wenn die Höhe nicht angepasst wird, wird das Bild verzerrt angezeigt, was dann nicht schön aussieht.

    #media_image-3 img { width: 100%; }

    PS: ich sehe gerade, dass width und height per inline-CSS angegeben werden, da muss du wohl direkt auf der Seite am Bild anpassen.

    Das Plugin Jetpack nimmt Einfluss auf die Bildgrösse (und bindet das Bild von einem externen Server ein). Daher wird das coming soon Bild jetzt von 300px Breite per o.g. CSS hochskaliert und ist unscharf.

    Code
    <img width="300" height="171" src="https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/06/coming-soon.jpeg?fit=300%2C171&amp;ssl=1" class="image wp-image-4831  attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/06/coming-soon.jpeg?w=1250&amp;ssl=1 1250w, https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/06/coming-soon.jpeg?resize=300%2C171&amp;ssl=1 300w, https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/06/coming-soon.jpeg?resize=1024%2C584&amp;ssl=1 1024w, https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/06/coming-soon.jpeg?resize=768%2C438&amp;ssl=1 768w" sizes="(max-width: 300px) 100vw, 300px" />


    Am Rande bemerkt: Die meisten Funktionen des Jetpack Plugins lassen sich nicht DSGVO konform nutzen, man sollte daher genau prüfen, ob man das einsetzen will.

    Zitat von b3317133

    Wenn das Deinem Freund nichts ausmacht


    Spätestens dann, wenn sich einer von diesen Abmahnanwälten bei ihm meldet, wird es ihm etwas ausmachen. :p:D

    @alle: Die Frage ist doch ne ganz andere. Warum wird denn immer gleich der ganze Blumenstrauss aufgemacht?
    Der Freund wohnt in Tunesien. Ausserdem ist das ein bewusstes Risiko, was Menschen eingehen. Das ist wie beim Koksen oder Bubatz Rauchen. Risiko kann man eingehen, wenn man es selbst trägt. Mann-o-Mann

    Zitat von mteepee

    Ausserdem ist das ein bewusstes Risiko, was Menschen eingehen.


    Es ist aber nicht allen bewusst, dass sie in ein Risiko eingehen, daher kann es ja nicht schaden, wenn man darauf hinweist. Mann-o-Mann

    Zitat von uha

    Wenn du die Breite erhöhst, wird auch die Höhe erhöht, das Bild wird dann riesig. Wenn die Höhe nicht angepasst wird, wird das Bild verzerrt angezeigt, was dann nicht schön aussieht.

    #media_image-3 img { width: 100%; }

    PS: ich sehe gerade, dass width und height per inline-CSS angegeben werden, da muss du wohl direkt auf der Seite am Bild anpassen.


    Hallo @uha Ich habe leider das Widget einmal gelöscht und wieder eingefügt mit einem anderen Bild. Jetzt passt der CSS Code irgendwie nicht mehr, kannst du mir nochmals helfen? Danke

    Das Plugin Jetpack nimmt Einfluss auf die Bildgrösse (und bindet das Bild von einem externen Server ein). Daher wird das Bild durch die Auslagerung und Komprimierung durch JetPack unscharf.

    Code
    Die eigentliche Datei, die nicht eingebunden wird:
https://www.mattiontour.de/wp-content/uploads/2024/07/mathias-engmann-kunst.jpg


Die ausgelagerte und komprimierte Datei, die derzeit eingebunden wird:
https://i0.wp.com/www.mattiontour.de/wp-content/uploads/2024/07/mathias-engmann-kunst.jpg?fit=1200%2C675&ssl=1

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden