Bild mit Scrollleiste?

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

Chemnitzer

Neues Mitglied
24 Juni 2018
10
0
1
Chemnitz
Bahnland-Sachsen.de.tl
#1
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
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#5
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.204
254
83
65
#6
Du musst nur:
  • die Höhe des Containers beschränken und
  • die Größe des Bildes nicht ändern
dann hat es die volle Größe und ist scrollbar:
imagescroll.png
 

Chemnitzer

Neues Mitglied
24 Juni 2018
10
0
1
Chemnitz
Bahnland-Sachsen.de.tl
#7
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
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#8
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:

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#9
Da muss dann noch die 'width: 93%;' für das Bild überschrieben werden... da sollte ein weiteres 'style="...." im <img> notwendig sein.
 

Chemnitzer

Neues Mitglied
24 Juni 2018
10
0
1
Chemnitz
Bahnland-Sachsen.de.tl
#10
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:

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#11
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.
 

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#12
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;">
 

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#14
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.
 

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#20
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;">