• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Chemnitzer

Neues Mitglied
Hallo,
ich habe ein sehr großes Bild, das man aber trotzdem detailliert anschauen können sollte.
Das mit den Scrollbalken habe ich hinbekommen mit
HTML:
<div style="overflow: scroll;"><img alt="Bild" src="Bild.png" /></div>
,
allerdings wird das Bild trotzdem im Ganzen angezeigt, sodass man nicht viel sieht; die Balken sind grau.
Ich hätte gern, dass nur die oberste linke Ecke angezeigt wird und man dann selbst nach unten und links scrollen kann.

Ich habe schon bissl mit width und zoom probiert, bin aber zu keiner besseren Veränderung gekommen.


Grüße
 
Werbung:
Wie groß ist den dein Bild? Weil wenn das Bild groß genug ist, kommen die Scrollbalken doch von alleine
*** Link entfernt, weil nicht mehr erreichbar ***
Denke mal das es an dein div Container liegt . Was für CSS hat den der
 
Zuletzt bearbeitet:
Ich habe das Bild hier testweise unter https://Bahnland-Sachsen.de.tl/Test.htm mit dem Code
HTML:
<div style="overflow: scroll;"><img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png" /></div>
eingebunden.
Es ist 3340 x 2120 Pixel groß. Ich möchte es später noch mit verweissensitiven Bereichen ausstatten.


Grüße
 
Werbung:
in deiner Css steht ja das hier
Code:
#main img, .widget img {
    max-width: 97%;
}

img {
    max-width: 97%;
}

Wenn ich es so ändere ist das Bild riesig.
Code:
#main img, .widget img {

 width:auto;

}
Soll es so riesieg sein oder soll es riesig sein aber begrenzt in den div und dann Scrollbar sein ? Ich weiß tolle erklärung
 
Und wie editiere ich so einen Container?

Da ich so einen Baukasten nutze, besteht mein Quelltext eben nur daraus
Ich habe das Bild hier testweise unter https://Bahnland-Sachsen.de.tl/Test.htm mit dem Code
HTML:
<div style="overflow: scroll;"><img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png" /></div>
eingebunden.

Aber genau so wie auf deinem Bild soll es aussehen.


Grüße
 
Werbung:
zb so
Code:
<div style="overflow: scroll;height: 80vh;"><img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png"></div>

Mußt nur deine eigene Angaben da rein tun je nachdem wie groß es sein soll.
zb.
80vh = 80% größe der höhe des Bildschirms
800px= größe in Pixel
80% = Prozent der größe des Eltern Elements
EDIT :Sehe gerade das man das ja bei sempervivum in Bild auch sehen kann.Das siehst du oben rechts das er genau das da rein geschrieben hat nur mit 400px.Nur die Angaben mußt du selber wissen wie groß das Bild sein soll,bzw der Container der das Bild hat
 
Zuletzt bearbeitet:
Da muss dann noch die 'width: 93%;' für das Bild überschrieben werden... da sollte ein weiteres 'style="...." im <img> notwendig sein.
 
Erstmal danke, allerdings bringt das alles kein Ergebnis.
Wenn ich einfach den Code eingebe, wie man ihn hier sieht
,
sieht es so aus:
Test123456.png

Und einzig bei height:800vh; width:800vw;, ist das Bild so, wie ich es haben möchte. Allerdings fehlen nun die Scrollbalken und es ragt rechts raus.
https://Bahnland-Sachsen.de.tl/Test.htm


Ergänzt: Und wie füge ich das jetzt bei <img> ein? Tut mir leid, dass ich mich da nicht so auskenne. :/


Grüße
 
Zuletzt bearbeitet:
Werbung:
Versuche es mal mit diesem Code!
HTML:
<div style="overflow: scroll; height: 80vh;">
    <img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png" style="height: 2120px; width: 3340px;" />
</div>
Sollte ich die Höhe und Seiten Angaben beim Bild verwechselt haben, musst du sinngemäß ändern.
 
Sorry.. im letzten Beitrag habe ich übersehen, dass da auch noch eine max-width zu überschreiben ist... mit dem <img> Tag sollte es aber klappen.
HTML:
<img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png" style="height: unset; width: unset; max-width: unset; max-height: unset;">
 
Werbung:
Ich denke, du hast nichts falsch gemacht... wen ich die Seite aufrufe, ist die Karte genau so, wie du es haben willst!
Leere mal dein Cache - liegt vielleicht daran, dass du immer noch die alte Version angezeigt bekommst.
 
Also auf der Test-Seite meiner Internetseite sieht es immer noch so aus wie vorher: Alle Balken grau und das Bild verkleinert.
 
Werbung:
Ah ja, in Chrome klappt es, nur im Internet Explorer leider nicht :/
Das ist zwar irgendwie auch bissl blöd, aber besser als nichts.

Danke an alle und gute Nacht!


Grüße
 
Werbung:
Hmmm... der InternetExplorer zickt eben ganz schön rum!
Es könnte helfen, wenn du in dem style="...." im <img> Tag statt dem 'unset' jeweils die richtigen Dimensionen deines Bildes in Pixeln einträgst.
.. also so
HTML:
<img alt="Bild" src="//img.webme.com/pic/b/bahnland-sachsen/Streckennetz_Sachsen_1902.png" style="height: 2120px; width: 3340px; max-width: 3340px; max-height: 2120px;">
 
Zurück
Oben