Hilfe
Neues Thema
Antworten
Ich habe eine ganz einfach HTML-Seite und darin würde ich gerne ein Bild einbauen, welches sich anpasst je nach Größe der Auflösung / des Fensters, also so dass das Bild immer komplett zu sehen ist.
Weiß jemand wie das geht?
Seite 1 von 1
HTML Bildgröße variabel machen
#1
Digisven 
- Gruppe: aktive Mitglieder
- Beiträge: 249
- Beigetreten: 27. Februar 04
- Reputation: 1
- Geschlecht:Männlich
- Wohnort:Nähe Hannover
geschrieben 01. Mai 2011 - 13:54
Hallo zusammen.
Ich habe eine ganz einfach HTML-Seite und darin würde ich gerne ein Bild einbauen, welches sich anpasst je nach Größe der Auflösung / des Fensters, also so dass das Bild immer komplett zu sehen ist.
Weiß jemand wie das geht?
Ich habe eine ganz einfach HTML-Seite und darin würde ich gerne ein Bild einbauen, welches sich anpasst je nach Größe der Auflösung / des Fensters, also so dass das Bild immer komplett zu sehen ist.
Weiß jemand wie das geht?
Nach oben
#2
Stefan_der_held
- Gruppe: Offizieller Support
- Beiträge: 14.292
- Beigetreten: 08. April 06
- Reputation: 935
- Geschlecht:Männlich
- Wohnort:Dortmund NRW
- Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)
geschrieben 01. Mai 2011 - 14:20
Der "Grundstein" ist da folgender:
Gebe deinem Bild folgende CSS Infos mit:
wird dies entsprechend 100% des Elements füllen in dem es sich befindet.
Selbstredend kann da das Bild schonmal gezerrt wirken... aber es ist ja nur der Weg zum Ziel.
Testseite.7z (51,56K)
Anzahl der Downloads: 373
Gebe deinem Bild folgende CSS Infos mit:
style="width: 100%; height: 100%;"
wird dies entsprechend 100% des Elements füllen in dem es sich befindet.
Selbstredend kann da das Bild schonmal gezerrt wirken... aber es ist ja nur der Weg zum Ziel.
Testseite.7z (51,56K)
Anzahl der Downloads: 373
#3
Digisven
- Gruppe: aktive Mitglieder
- Beiträge: 249
- Beigetreten: 27. Februar 04
- Reputation: 1
- Geschlecht:Männlich
- Wohnort:Nähe Hannover
geschrieben 01. Mai 2011 - 14:43
Erstmal danke Stefan.
Also ich meinte das so: http://img703.images...s/i/seiteu.jpg/
Das ist jetzt in meiner Auflösung. Ich würd es gern so haben, dass das auch in einer anderen Auflösung so aussieht. Das Bild sollte nicht komplett auf der Seite sein nur immer komplett zu sehen sein.
Also ich meinte das so: http://img703.images...s/i/seiteu.jpg/
Das ist jetzt in meiner Auflösung. Ich würd es gern so haben, dass das auch in einer anderen Auflösung so aussieht. Das Bild sollte nicht komplett auf der Seite sein nur immer komplett zu sehen sein.
#4
Ludacris
- Gruppe: Moderation
- Beiträge: 4.669
- Beigetreten: 28. Mai 06
- Reputation: 222
- Geschlecht:Männlich
geschrieben 02. Mai 2011 - 14:43
Zitat (Digisven: 01.05.2011, 15:43)
Erstmal danke Stefan.
Also ich meinte das so: http://img703.images...s/i/seiteu.jpg/
Das ist jetzt in meiner Auflösung. Ich würd es gern so haben, dass das auch in einer anderen Auflösung so aussieht. Das Bild sollte nicht komplett auf der Seite sein nur immer komplett zu sehen sein.
Also ich meinte das so: http://img703.images...s/i/seiteu.jpg/
Das ist jetzt in meiner Auflösung. Ich würd es gern so haben, dass das auch in einer anderen Auflösung so aussieht. Das Bild sollte nicht komplett auf der Seite sein nur immer komplett zu sehen sein.
genau so wie er es gesagt hat... width und height in prozent bedeutet, dass das element immer n prozent des fensters offen hat
#5
Digisven
- Gruppe: aktive Mitglieder
- Beiträge: 249
- Beigetreten: 27. Februar 04
- Reputation: 1
- Geschlecht:Männlich
- Wohnort:Nähe Hannover
geschrieben 02. Mai 2011 - 20:49
Wenn ich da Prozent einbaue ist das Bild über die ganze Seite verteilt, so wollt ich das ja nicht. ^^
Es sollte immer nur komplett zu sehen sein, aber nicht komplett auf der GANZEN Seite verteilt... also einmal schööön gezerrt ^^
Es sollte immer nur komplett zu sehen sein, aber nicht komplett auf der GANZEN Seite verteilt... also einmal schööön gezerrt ^^
#6
Ludacris
- Gruppe: Moderation
- Beiträge: 4.669
- Beigetreten: 28. Mai 06
- Reputation: 222
- Geschlecht:Männlich
geschrieben 03. Mai 2011 - 10:51
dann gib sowas wie 25% ein oder so bei höhe und breite... alternativ kannst du auch ne ebene herumlegen und die entsprechend verzerren
wäre ne andere
<img src="path/to/img.png" style="width:50%; height:50%;" />wäre ne möglichkeit und
<style>
.stretchedimg{
width:50%;
height:50%;
margin:0 auto!important;
}
</style>
<body>
<img src="path/to/img.png" class="stretchedimg"/>
</body>
wäre ne andere
Dieser Beitrag wurde von Ludacris bearbeitet: 03. Mai 2011 - 10:54
#7
Tienchen
- Gruppe: aktive Mitglieder
- Beiträge: 423
- Beigetreten: 09. März 08
- Reputation: 0
- Geschlecht:Männlich
geschrieben 05. Mai 2011 - 05:30
Wenn man richtig modern sein will (und ältere Browser nicht unterstützt werden müssen) gibt es das Canvas-Element drawImage(). Nur trifft das eben nicht für IE8 und älter Nutzer zu - es gäbe hierür aber das Script http://code.google.c...explorercanvas/.
Vorteil: Es ist wesentlich weniger verzerrt als mit CSS das Bild "großziehen".
Nachteil: Es ist ein deutlich komplexeres Werkzeug als CSS.
Mehr dazu gibt's z.B. hier: http://canvas.quaese...av=11&doc_id=56
Vorteil: Es ist wesentlich weniger verzerrt als mit CSS das Bild "großziehen".
Nachteil: Es ist ein deutlich komplexeres Werkzeug als CSS.
Mehr dazu gibt's z.B. hier: http://canvas.quaese...av=11&doc_id=56
Thema verteilen:
Seite 1 von 1