Bild an Browser anpassen
#1
Hallo in die Runde,
ich habe mal wieder ein Problemchen.
Ich möchte gerne ein Bild auf meiner Seite responsive haben, allerdings nicht als Hintergrundbild und auch nicht im Header, sondern eben einfach so, wie ein eingefügtes Bild. Das soll sich in der Breite an das Browserfenster anpassen. Ich hatte es auch schon mit einem Code probiert:
<div style='position:relative'>
<img src='bild' width:100%; position:absolute; left:0px; top:0px' />
<div style='position:absolute; width:100%; display:table-cell; vertical-align:middle'>
</div>
</div>
Was dann passiert, ist irgendwie so gar nicht das, was ich wollte (Bild dazu hängt an).
Die Website ist https://studio-nice.de, das verwendete Design ist Stockholm.
Kann mir da jemand helfen?
Beste Grüße aus Hamburg
Moin @nadine.is.here !
Gratulation zu Deiner hervorragenden Webseite! Was man mit Jimdo alles machen kann!
Zu Deiner Frage (ich hoffe, ich hab sie richtig verstanden):
Die CSS- Anweisung width:100% bezieht sich leider immer nur auf das Elternelement. Selbst wenn Du das Bild absolut positionierst, wird es also nur Contentbreit. Du kannst das aber umgehen, indem Du einen neagtiven margin setzt, den Du durch ein gleich großen positives padding wieder aufhebst.
...ein feines Tutorial findest Du hier: https://expanding.jimdo.com/hacks/fullwi...or-any-element/
...und ein Beispiel mit einem Bild hier: https://designtest-hamburg.jimdo.com/images/
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Es gibt auch noch eine andere Methode, aber die funktioniert nicht bei allen Designs:
https://expanding.jimdo.com/hacks/full-width-slider/
Beispiel:
https://redesign-berlin-seminar.jimdo.co...ullwidth-images
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
