WinFuture-Forum.de: HTML Bildgröße variabel machen - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

HTML Bildgröße variabel machen


#1 Mitglied ist offline   Digisven 

  • Gruppe: aktive Mitglieder
  • Beiträge: 242
  • Beigetreten: 27. Februar 04
  • Reputation: 0

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? <_<
0

Anzeige



#2 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 12.986
  • Beigetreten: 08. April 06
  • Reputation: 465

geschrieben 01. Mai 2011 - 14:20

Der "Grundstein" ist da folgender:

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.

Angehängte Datei  Testseite.7z (51,56K)
Anzahl der Downloads: 247
0

#3 Mitglied ist offline   Digisven 

  • Gruppe: aktive Mitglieder
  • Beiträge: 242
  • Beigetreten: 27. Februar 04
  • Reputation: 0

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. <_<
0

#4 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.508
  • Beigetreten: 28. Mai 06
  • Reputation: 181

geschrieben 02. Mai 2011 - 14:43

Beitrag anzeigenZitat (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. :)


genau so wie er es gesagt hat... width und height in prozent bedeutet, dass das element immer n prozent des fensters offen hat
0

#5 Mitglied ist offline   Digisven 

  • Gruppe: aktive Mitglieder
  • Beiträge: 242
  • Beigetreten: 27. Februar 04
  • Reputation: 0

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 ^^
0

#6 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.508
  • Beigetreten: 28. Mai 06
  • Reputation: 181

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
<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

0

#7 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0

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
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0