Responsive Image wie?

Servus,

also ich dreh hier gleich durch :)

Ich bin ehrlich, ich checks nicht wie es funktionieren soll.

Momentan arbeite ich mit Bootstrap, und da sind die Bilder immer an den grids ausgerichtet, also 100%.

Jetzt wollte ich die Resp Images mal testen, aber ich komm nicht ans Ziel.

Mir würde schon reichen wenn ich 2 vers. Auflösungen habe, von meinem 1024px breiten Bild. Jedoch sind die Bilder immer starr, da ich überall PX Angaben machen muss??

Ich möchte aber das mein Bild innerhalb meiner "col" auf 100% streckt. Wie sollte ich die Bilder nun anlegen? Ich werd wohl doch noch meine css Anweisung für die Bilder brauchen:

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

Lieg ich da richtig? Evtl. hat jemand Tipps.

Danke
Dani

Hallo,

na das ist doch die Anweisung von Bootstrap. Die ist schon korrekt. Brauchst nur das img-template anpassen und am Bild die Klasse nachtragen und schon passt das. Ab Contao 3.4 wird's mit den Responsive Images noch gescheiter.

fg
nicky

Gesendet von iPad mit Tapatalk

Servus,

ja ich dachte ich kann das weglassen... Ok! Aber das ce_image funkt nicht mehr im 3.4. Da wurde das <img ausgelagert. Dann muss ich es so auszeichnen.

<img> steckt jetzt im picture_default.html5

Hallo,

weglassen kannst du es trotzdem nicht. Der Vorteil in Zusammenarbeit mit dem responsive image feature von Contao ist, dass nicht mehr immer das selbe große Bild geladen wird, sondern je nach Bildschirmgröße ein kleineres. Also effektiv immer das, was gerade benötigt wird.

Was das template angeht, so ist das richtig, was du sagst. Das wurde ab 3.3 umgestellt.

fg
nicky

Gesendet von iPad mit Tapatalk

Hey,

ja genau, habs checkt. Schon super so, das jetzt vers. Auflösungen ausgespuckt werden bei vers. px breiten, sehr cool. Muss mich da mal reinfuchsen. Danke Dir

Blöde Frage:

hat es sschon jemand hinbekommen satt auf ein IMG-tag das auf ein DIV-Tag umzubauen mit style=background-image ???

Moin Ralf,

die Idee mit dem DIV und Background-Image ist eigentlich ganz nett, allerdings nur schwer und mit Einschränkungen umzusetzen. Die Responsive Images sind ja eine neue Art, wie der Browser Bilder interpretiert – mittels SOURCESET und SIZES Attribut. Du kannst den Code zwar theoretisch ein Stück weit umstricken, aber der Effekt wird nicht der Gleiche sein. Die Einstellungen, die du in SOURCESET und SIZES machst sind Empfehlungen an den Browser, was er daraus macht, bleibt aber ihm überlassen (zum Beispiel eine kleineres Bild bei langsamerer Internetverbindung laden [so die Theorie]).

Da die Responsive Images momentan sowieso noch ein recht wackeliges Konstrukt sind (guter Browsersupport nur durch Polyfill), würde ich Dir eher dazu raten, deine Background-Images direkt per CSS festzulegen, oder – falls es darum geht, das für den Kunden bedienbar zu machen – eine kleine Erweiterung dafür zu entwickeln. Dann bist du auch unabhängig von resp-image.js.

Ich habe die Bilder auf unserer Website recht lange als Background-Image mit Media-Queries eingebunden, weil ich dann auch solche praktischen Anweisungen wie background-size: cover nutzen konnte. Abgesehen davon sind die Responsive Images aber in vielen Punkten dem Background-Image überlegen.

Grüße,
Dennis

Hallo,

ich stehe gerade vor dem gleichen Problem und habe es wie folgt gelöst, dass ein Bild welches über eine Bildgröße für das image-set verfügt als Background Bild eingefügt wird. Damit auch hier der Browser die richtige Datei automatisch nimmt, habe ich aus dem CSS4 die image-set für das Background-image verwendet. als Fallback dient das eigentliche Background-image.

Hierzu habe ich das Template von ce_image wie folgt abgeändert:

PHP-Code:

<?php $this->extend('block_searchable'); ?> <?php $this->block('content'); ?> <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>> <?php $bilderArray = explode ( "," , $this->picture['img']['srcset']); ?> <div class="insidePicture" style="background-image: url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>); background-image: -webkit-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x, url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x, url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x, url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x); background-image: -moz-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>g) 1x, url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x, url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x, url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x); background-image: -o-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x, url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x, url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x, url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x); background-image: -ms-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x, url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x, url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x, url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat:no-repeat; "> <?php if ($this->href): ?> <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>> <?php endif; ?> <?php //$this->insert('picture_default', $this->picture); //print_r($this); ?> <?php if ($this->href): ?> </a> <?php endif; ?> <?php if ($this->caption): ?> <figcaption class="caption"><?= $this->caption ?></figcaption> <?php endif; ?> </div> </figure> <?php $this->endblock(); ?>

Jetzt stehe ich aber gerade vor einer Denkaufgabe wo ich nicht weiter komme. Das Bild wird ja in einem Div mit eingefügt, welches natürlich nicht der "body" ist. Jetzt frage ich mich wie ich das Problem lösen kann, damit das Bild im Hintergrund auf 100% breite und höhe angezeigt werden kann. Ich habe das Template für eine OnePage Website erstellt, in der ich 5 Seiten über ein andere habe.

Grüße

Bongartz120

Zitat:

Zitat von hofff

Der Vorteil in Zusammenarbeit mit dem responsive image feature von Contao ist, dass nicht mehr immer das selbe große Bild geladen wird, sondern je nach Bildschirmgröße ein kleineres. Also effektiv immer das, was gerade benötigt wird.

Naja meistens eigentlich ein größeres ;)

Kommt drauf an, wie man es nutzt. Ok, ist natürlich schon so, dass immer ein größeres oder gleich großes Bild geladen wird als was gebraucht wird. Aber eben das kleinstmögliche größere ;). Ohne das responsive image feature würde ich zum Beispiel immer ein 1280x400 Headerbild laden, so kann jetzt bei kleiner Viewportbreite auch ein 640x200 oder 320x100 geladen werden. Bei einem großen Retinadisplay allerdings auch mal das 2560x800 Originalbild.

Zitat:

Zitat von tab

Kommt drauf an, wie man es nutzt. Ok, ist natürlich schon so, dass immer ein größeres oder gleich großes Bild geladen wird als was gebraucht wird. Aber eben das kleinstmögliche größere ;). Ohne das responsive image feature würde ich zum Beispiel immer ein 1280x400 Headerbild laden, so kann jetzt bei kleiner Viewportbreite auch ein 640x200 oder 320x100 geladen werden. Bei einem großen Retinadisplay allerdings auch mal das 2560x800 Originalbild.

Naja, auf Desktop PCs wird wohl niemand jemals den Browser auf 320 Pixel verkleinern. Und auf mobilen Geräten, oder auch Laptops mit Bildschirmen die eine hohe Pixeldichte haben, wird oft das 1280px Große oder ein größeres Bild benötigt. Selbst auf mobilen Geräten, die nur einen dppx Wert von 2 haben, wird das 1280px große Bild geladen, nicht das 640px große Bild.

Wenn du das optimieren willst, solltest du die Skalierungsfaktoren auf 0.57x, 0.85x, 1x, 1.6x, 2x, 2.25x setzen (oder nur 0.57x, 0.85x, 1x, 2.25x, man muss es ja nicht übertreiben).

Also mein Billighandy lädt jedenfalls das 640er Bild - mangels Retinadisplay. Aber wenn wir gerade mal dabei sind, welche Displaygrößen hast du jetzt für die Berechnung der Faktoren als Ausgangspunkt genommen?

Ja ok, es gibt natürlich auch noch Billig Handys mit zB 480px Breite :).

Die Auflösungen von denen ich jetzt ausgegangen bin:
720px (Devices mit 720x1280 Display)
1080px (Devices mit 1080x1920 Display - alle modernen Android Handys)
1280px (Desktop)
2048px (Diverse Tablets mit 2048x1536 Display)
2560px (bspw. 13.3" Retina MacBook Pro)
2880px (bspw. 15" Retina MacBook Pro)
Letzteres kann man sich aber eigentlich sparen, da das Bild ja sowieso nicht größer als 2560px dargestellt wird (je nach Layout der Website - ich vermute mal 1280px ist die max-width).

Zitat:

Zitat von Spooky

[*]2880px (bspw. 15" Retina MacBook Pro)[/list]Letzteres kann man sich aber eigentlich sparen, da das Bild ja sowieso nicht größer als 2560px dargestellt wird (je nach Layout der Website - ich vermute mal 1280px ist die max-width).

Korrekt. Sieht bei "normalen" Seiten sonst schon sehr komisch aus, wenn man nicht gerade ganz besonders viel Content auf der Seite hat.