Bilder mit Javascript auf 100% strecken!!!!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
ausschnitt
befehl
bild
bleiben
boxen
bringen
browser
falle
funktionieren
hintergrundbild
nehmen
normales bild
packen
probieren
realisieren
regel
schnauze
teil
tip
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
naja, hab auch nichts gefunden. aber man könnte doch eine eigene div-box nehmen, das bild als normales bild verlinken, alles skalieren und dann mittels indexposition alles ganz nach hinten packen. so würde ich es probieren.
-
moonfight schrieb:
Ich habe ein hintergrundbild was groß ist und man sieht nur einen teil davon, aber wie kann man das mit css auf 100% bringen?
(Mit der Suchfunktion hab ich bis etz nix gscheits gfunden)
gruss
Du kannst immer nur soviel anzeigen vom Bild wie die Bildschirmauflösung groß ist. Alles andere wird abgeschnitten oder ist scrollbar.
Verwende ein kleineres Bild und die Sache hat sich erledigt.
Wie groß ist denn "groß"? -
gorß ist 2500x1666 und das soll auch so groß bleiben. Nur des Problem ist eben das ich ALLES anzeigen lassen will und nciht nur Ausschnitte, denn wenn dann jemand eine größere Bildschirmauflösung hat soll er auch nur das ganze Bild sehen. Größer als 2500x1666 muss und soll es auch nicht sein.
Ich hoffe es ist jetzt ein bisschen verständlicher.
gruss -
könnte man das nicht mit imagemagick realisieren??
-
sebastian-l schrieb:
könnte man das nicht mit imagemagick realisieren??
nee, das soll doch scheinbat immer voll sichtbar sein. da müssen also feste bildwerte an die fenstergröße dynamisch angepasst werden.
direkt im bg-bild wüsste ich auch nichts -
moonfight schrieb:
gorß ist 2500x1666 und das soll auch so groß bleiben.
Schon gewusst das die aktuelle Durchschnittsbildschirm Auflösung eines Webbenutzers bei 1024*768 (abzüglich Browserrahmen) liegt?
Als Hintergrundsbild ist das Bild überdimensioniert und verschwendet nur unnötig Traffic. Wer will schon ein 2-3MB großes Hintergrundsbild laden? -
Ok, danke für den Tipp ich werds kleiner machen.
sonok schrieb: naja, hab auch nichts gefunden. aber man könnte doch eine eigene div-box nehmen, das bild als normales bild verlinken, alles skalieren und dann mittels indexposition alles ganz nach hinten packen. so würde ich es probieren.
Würde das denn funktionieren und wie geht das überhaupt? -
Vom Browser kleiner skalierte Bilder sehen grundsätzlich bescheiden aus. Und nein, ohne Javascript würde es nicht gehen.
EIn Hintergrundbild passt entweder genau in die Auflösung oder es ist kachelbar oder man hat wie in deinem Fall ein übergroßes Bild, aber muss sich nicht daran stören das es größer ist.
Es gibt Möglichkeiten Bilder zu skalieren in HTML, aber die sind alle bescheiden und verlangen teilweise nach Javascript. -
ach, geht super!
moonfight schrieb:
Würde das denn funktionieren und wie geht das überhaupt?
. grade getestet habe ich
<img src="bg_bild_2.png" alt="bild_a" width="100%">
, ein bildchen meiner hp. da liegt es hinter der tabelle, und ich lass es mal bis heute abend so. wenn man also meine lima-city-seite aufruft :-) und dann die größe des browserfensters änder, dann kann man sehen, wie sich ein fenster ändert, verschiebt sich ein bild.
der css-befehl, um die div-box nach hinten zu packen, lautet
z-index:0
so, fröhliches testen mit padding und co.
ach, ich habe übrigens 1440 * 900 pixel. von solche genormten webseitenaufbauweisen für eine auflösung, einen browser etc wird in der regel eher abgeraten.
Beitrag zuletzt geändert: 17.2.2009 17:05:59 von sonok -
evil-devil schrieb:
Width="100%" ist verdammt böse und einige Browser fallen damit auf die Schnauze. Aber jedem das seine. Sauber ist das jedenfalls nicht.
naja, ich habe jetzt nicht geguckt, in welchen browsern es läuft und in welchen nicht. dafür dürfte das die schnellste und unkomplizierteste variante sein. um das bild variabel zu bekommen. -
Notfalls mit JavaScript durch:
offsetHeight
offsetWidth
die Anzeigehöhe-/ breite bestimmen...
Anders geht das glaube nicht... -
und wie genau kannst du mir da bitte einen link oder einen code geben. Mit Java Scripten kenn ich mich überhaupt nicht aus (nur mit html und php)
gruss -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
