So sollte sich das JPG idealerweise beim Ändern der Größe des Browserfensters verhalten:
Beiträge von blaupark
-
-
Riesendank - das ist super
Wenn ich das Browserfenster jetzt in der Horizontalen schmaler mache, dann werden auch der Flyer und der Text schmaler. Das ist perfekt.
Ich würde gerne, dass der Flyer ebenfalls kleiner wird, wenn ich das Browserfenster in der Vertikalen verkleinere. Ist das mit der flex-Basis auch möglich?
Es soll halt egal bei welcher Größe des Browserfensters der Flyer komplett zu sehen sein (komplett in der Breite und in der Höhe). Der Fließtext darunter soll sich dann immer an der aktuellen Breite des Flyers orientieren.
Wenn Du noch einen Vorschlag hättest, wäre ich Dir sehr dankbar
aktueller Quelltext:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>aRaum.de</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> <style type="text/css"> body, html {height:100%;} body { } .opencall{ height: 98%; margin: 5 5; background:url(openCall-aGalerie.jpg) 50% 50% no-repeat; background-size:contain; } * { box-sizing:border-box; font-size:1.05em; } .wrapper { display:block; position:relative; max-width:570px; margin:0 auto;border:1px dotted #ccc;} .responsive { display:flex; flex-direction:column; } .text { text-align:center;font-family:sans-serif } .flyer > IMG { width:100%; height:auto; } a {color: #000000;text-decoration:overline;} a:hover {color: #000000;text-decoration:none;} a:visited {color: #000000;text-decoration:overline;} </style> </head> <body> <!-- <div class="opencall"></div>--> <div class="wrapper"> <div class="responsive"> <div class="flyer"><img src="http://araum.de/openCall-aGalerie.jpg" alt=""></div> <div class="text"> <h3 style="font-family:sans-serif"><a href="https://www.facebook.com/events/1872758206169199/" target="_blank">facebook.com/araumev</a> <br /> <br /> </h3> <p>OPEN CALL</p><p>|| send photos/scans/etc. to: opencall@araum.de ||</p><p>Für die Off-Space-Ausstellung "aGalerie" suchen wir noch Künstler*innen, die bisher wenige Erfahrungen im Ausstellen haben. Bittet leitet diesen Aufruf an möglicherweise Interessierte aus nah und fern weiter.</p><p>Das alte Schwesternwohnheim auf der Straße "Am Schwarzen Meer" im Bremer Hulsberg-Viertel wird mit Hilfe der ZwischenZeitZentrale zurzeit "zwischengemietet". Unter dem Projektnamen "Hulsberg Crowd" werden die Räume aktuell von verschiedensten Initiativen (u.a. Einfach Einsteigen & Aktionsbündnis Wachstumswende) genutzt, bis im Juli der Gebäudekomplex für den Bau eines Parkplatzes abgerissen wird.</p><p>Der Ostflügel des alten Schwesternwohnheims steht bis zum Abriss fast komplett leer, sodass wir hier vom 6. bis 10. März eine temporäre Galerie mit Begleitprogramm installieren. 13 Räume können frei von Künstler*innen gestaltet werden:</p><p>Schrauben, Bohren, Streichen, Bauen - alles erlaubt.</p><p>Gemälde, Sound, Video, Skulptur: Fast alles ist möglich!</p><p>Wir wollen mit viel Programm auf den Leerstand sowie den Umgang mit dem wunderbaren Gebäude, das nach aktuellen Maßstäben isoliert und voll funktionstüchtig ist, aufmerksam machen. Von nachhaltiger Stadtplanung kann keine Rede sein, wenn Gebäude aus städtischer Hand und OHNE Sanierungsbedarf für Parkplätze abgerissen werden!</p><p>Liebe Grüße</p><p>aRaum</p><p>http://aRaum.de<br />https://www.facebook.com/araumev<br />https://hulsbergcrowd.de</p> <p>|| aGalerie ||<br />Altes Schwesternwohnheim<br />Am Schwarzen Meer 142<br />(links neben dem Eislabor)<br />28205 Bremen-Hulsberg</p><p>|| Bewerbung ||<br />bis 02. März 23h<br />technischer Support (TV, Lautsprecher, Kabel etc.) für multimediale Arbeiten vorhanden</p> <p>|| Auftakt ||<br />06. März 21h<br />Konzert Red On / Subrihanna / Magic Meru / <br />DJ Christoff Riedel <br />https://www.facebook.com/events/740051916387610/<br /><br /> || Gestaltung der Räume ||<br />06.-08. März<br />https://www.facebook.com/events/1872758206169199/<br /><br /> || Vernissage ||<br />08. März 2019 18h<br /><br /> || Ausstellung ||<br />08.-10. März<br />16 - 21h<br /><br /> || Party ||<br />09. März 21h<br />Support: Irgendwo-Bar <br /><br /><br />|||</p> </div> </div> </div> <br /> <br /> </body> </html> -
Riesendank, Arne
Ich habe den Quelltext jetzt entsprechend Deiner Anmerkungen umgeschrieben.
Der Text verhält sich jetzt responsiv und ist maximal so breit wie der Flyer.
Jedoch ist die Größe des Flyers jetzt nicht mehr responsiv. Ich würde gerne, dass beim Aufruf der Website (egal bei welcher Bildschirmauflösung/Dimensionierung des Browserfensters) das Flyer-JPG vollformatig (ggf. mit 5 Pixel Abstand zu jeder Seite, also links, rechts, oben, unten) angezeigt wird.
Ist das mit Deiner Lösung auch möglich?
Mit meinem DIV mit dem Flyer-JPG als background-image konnte ich das Browserfenster nach dem Laden beliebig größer und kleiner machen, während der Flyer immer vollformatig angezeigt wurde (die Version ist noch online http://araum.de).
Ich wäre super dankbar, wenn es es eine Lösung gibt, die diese Responsivität des Flyer-JPGs beibehält
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>aRaum.de</title> <meta charset="utf-8" /> <style> body, html {height:100%;} body { } * { box-sizing:border-box; font-size:1.1em; } .wrapper { display:block; position:relative; max-width:600px; margin:0 auto;} .responsive { display:flex; flex-direction:column; } .text { text-align:center;font-family:sans-serif } a {color: #000000;text-decoration:overline;} a:hover {color: #000000;text-decoration:none;} a:visited {color: #000000;text-decoration:overline;} </style> </head> <body> <div class="wrapper"> <div class="responsive"> <div class="flyer"><img src="http://araum.de/openCall-aGalerie.jpg" alt=""></div> <div class="text"> <h3 style="font-family:sans-serif"><a href="https://www.facebook.com/events/1872758206169199/" target="_blank">facebook.com/araumev</a> <br /> <br /> </h3> <p>OPEN CALL</p><p>|| send photos/scans/etc. to: opencall@araum.de ||</p><p>Für die Off-Space-Ausstellung "aGalerie" suchen wir noch Künstler*innen, die bisher wenige Erfahrungen im Ausstellen haben. Bittet leitet diesen Aufruf an möglicherweise Interessierte aus nah und fern weiter.</p><p>Das alte Schwesternwohnheim auf der Straße "Am Schwarzen Meer" im Bremer Hulsberg-Viertel wird mit Hilfe der ZwischenZeitZentrale zurzeit "zwischengemietet". Unter dem Projektnamen "Hulsberg Crowd" werden die Räume aktuell von verschiedensten Initiativen (u.a. Einfach Einsteigen & Aktionsbündnis Wachstumswende) genutzt, bis im Juli der Gebäudekomplex für den Bau eines Parkplatzes abgerissen wird.</p><p>Der Ostflügel des alten Schwesternwohnheims steht bis zum Abriss fast komplett leer, sodass wir hier vom 6. bis 10. März eine temporäre Galerie mit Begleitprogramm installieren. 13 Räume können frei von Künstler*innen gestaltet werden:</p><p>Schrauben, Bohren, Streichen, Bauen - alles erlaubt.</p><p>Gemälde, Sound, Video, Skulptur: Fast alles ist möglich!</p><p>Wir wollen mit viel Programm auf den Leerstand sowie den Umgang mit dem wunderbaren Gebäude, das nach aktuellen Maßstäben isoliert und voll funktionstüchtig ist, aufmerksam machen. Von nachhaltiger Stadtplanung kann keine Rede sein, wenn Gebäude aus städtischer Hand und OHNE Sanierungsbedarf für Parkplätze abgerissen werden!</p><p>Liebe Grüße</p><p>aRaum</p><p>http://aRaum.de<br />https://www.facebook.com/araumev<br />https://hulsbergcrowd.de</p><p>--> aGalerie<br />Altes Schwesternwohnheim<br />Am Schwarzen Meer 142<br />(links neben dem Eislabor)<br />28205 Bremen-Hulsberg</p><p>--> Bewerbung<br />bis 02. März 23h<br />technischer Support (TV, Lautsprecher, Kabel etc.) für multimediale Arbeiten vorhanden</p><p>--> Auftakt<br />06. März 21h<br />Konzert Red On / Subrihanna / Magic Meru / <br />DJ Christoff Riedel<br />https://www.facebook.com/events/740051916387610/<br /><br />--> Gestaltung der Räume<br />06.-08. März<br />https://www.facebook.com/events/1872758206169199/<br /><br />--> Vernissage<br />08. März 2019 18h<br /><br />--> Ausstellung<br />08.-10. März<br />16 - 21h<br /><br />--> Party<br />09. März 21h<br />Support: Irgendwo-Bar<br /><br /><br />|||</p> </div> </div> </div> <br /> <br /> </body> </html> -
Moin zusammen,
ich bin neu hier und das ist mein erster Beitrag. Ich würde mich über etwas Hilfe freuen - das wäre super
Ich baue gerade eine minimalistische Website, die komplett responsiv sein soll. Die Website besteht nur aus einer Seite.
Beim Aufruf soll vollformatig der aktuelle Veranstaltungsflyer gezeigt werden. (Das löse ich aktuell darüber, dass ich den Flyer als Background-Image eines Divs skaliere.)
Durch scrollen soll exakt auf derselben Breite des Flyers Text folgen.
Am Schluss soll wiederum exakt auf derselben Breite des Flyers der Link zu facebook folgen.
Wie gesagt, alles soll responsiv sein. Die Flyer sind so dimensioniert, dass damit exakt das Seitenverhältnis vom Smartphone-Display im Hochkant-Format abgebildet wird.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>aRaum.de</title> <style> body, html {height:100%;} body { } div{ height: 98%; margin: 5 5; background-size:contain; } div.opencall{ height: 98%; margin: 5 5; background:url(openCall-aGalerie.jpg) 50% 50% no-repeat; background-size:contain; } div.content{ height: 98%; margin: 5 5; background:url(wback.jpg) 50% 50% no-repeat; background-size:contain; } a {color: #000000;text-decoration:overline;} a:hover {color: #000000;text-decoration:none;} a:visited {color: #000000;text-decoration:overline;} </style> </head> <body> <div class="opencall"> </div> <br /> <br /> <center> <h3 style="font-size:200%;font-family:sans-serif"><a href="https://www.facebook.com/events/1872758206169199/" target="_blank">facebook.com/araumev</a> <br /> <br /> </h3> </center> <br /> <div class="content"> <center> OPEN CALL <p>|| send photos/scans/etc. to: opencall@araum.de ||</p> <p>Für die Off-Space-Ausstellung "aGalerie" suchen wir noch Künstler*innen, die bisher wenige Erfahrungen im Ausstellen haben. Bittet leitet diesen Aufruf an möglicherweise Interessierte aus nah und fern weiter.</p> <p>Das alte Schwesternwohnheim auf der Straße "Am Schwarzen Meer" im Bremer Hulsberg-Viertel wird mit Hilfe der ZwischenZeitZentrale zurzeit "zwischengemietet". Unter dem Projektnamen "Hulsberg Crowd" werden die Räume aktuell von verschiedensten Initiativen (u.a. Einfach Einsteigen & Aktionsbündnis Wachstumswende) genutzt, bis im Juli der Gebäudekomplex für den Bau eines Parkplatzes abgerissen wird.</p> <p>Der Ostflügel des alten Schwesternwohnheims steht bis zum Abriss fast komplett leer, sodass wir hier vom 6. bis 10. März eine temporäre Galerie mit Begleitprogramm installieren. 13 Räume können frei von Künstler*innen gestaltet werden:</p> <p>Schrauben, Bohren, Streichen, Bauen - alles erlaubt.</p> <p>Gemälde, Sound, Video, Skulptur: Fast alles ist möglich!</p> <p>Wir wollen mit viel Programm auf den Leerstand sowie den Umgang mit dem wunderbaren Gebäude, das nach aktuellen Maßstäben isoliert und voll funktionstüchtig ist, aufmerksam machen. Von nachhaltiger Stadtplanung kann keine Rede sein, wenn Gebäude aus städtischer Hand und OHNE Sanierungsbedarf für Parkplätze abgerissen werden!</p><p>Liebe Grüße</p> <p>aRaum</p> <p>http://aRaum.de<br /> https://www.facebook.com/araumev<br /> https://hulsbergcrowd.de</p> <p>--> aGalerie<br /> Altes Schwesternwohnheim<br /> Am Schwarzen Meer 142<br />(links neben dem Eislabor)<br /> 28205 Bremen-Hulsberg</p> <p>--> Bewerbung<br /> bis 02. März 23h<br />technischer Support (TV, Lautsprecher, Kabel etc.) für multimediale Arbeiten vorhanden</p> <p>--> Auftakt<br /> 06. März 21h<br /> Konzert Red On / Subrihanna / Magic Meru /<br /> DJ Christoff Riedel<br />https://www.facebook.com/events/740051916387610/</p> <p>--> Gestaltung der Räume<br />06.-08. März<br />https://www.facebook.com/events/1872758206169199/</p><p>--> Vernissage<br />08. März 2019 18h</p> <p>--> Ausstellung<br /> 08.-10. März<br />16 - 21h</p> <p>--> Party<br /> 09. März 21h<br />Support: Irgendwo-Bar</p> <p>|||</p> </center> </div> <br /> </body> </html>Anmerkung: Aktuell habe ich versucht, den Text innerhalb eines zweiten Divs, das als Hintergrund das "wback.jpg" mit genau den gleichen Pixel-Maßen wie der Flyer hat, zu arrangieren. Doch leider orientiert sich der Text nicht daran, sondern wird auf voller Breite dargestellt.
Nun mein Problem:
Wie bekomme ich es hin, dass der Text unter dem Flyer dynamisch genau auf die Breite des Flyers skaliert wird?
Ich wäre super dankbar für Hilfe.
LG Juli