Unterschiedliches Bildgröße bei PC und Mobil

[Sascha Deutsch]

Gute Tag,

ich habe über meinen Foren ein Bild, welches bei einem standard Browser am PC/MAC mir zu klein ist, wenn ich dieses aber breiter mache, ist es zu breit für die mobile Ansicht.

Nun kann ich 2 Bilder auf meinem Webspace hinterlegen und müsste nur zuweisen, wann welches Bild verwendet werden soll. (Dabei bräuchte ich Hilfe)

Es geht im Speziellen um dieses Forum: http://www.aurum-forum.de

Es handelt sich um das Bild mittig über den einzelnen Foren.

Herzlichen Dank

[eko1]

du hast das Bild einfach händisch eingesetzt, besser ist es über die CSS Responsive anzuzeigen.

Code: Alles auswählen

img {
    width: 100%;
    height: auto;
}

Responsive Web Design - Images

[Melmac]

Hallo Sascha,

Du hast in der <phpbb_root>/styles/prosilver/template/forumlist_body.html ganz am Anfang folgende Zeile eingefügt:

Code: Alles auswählen

<center><img src="http://www.aurum-forum.de/legende.png" /></center>

Nur ein erster schneller Ansatz vielleicht; ich nehme die aktuelle Grafik mal als Ausgangspunkt:

1) Nimm diesen Code dort wieder raus
2) Kopiere kopiere dieses File von prosilver in den template-Ordner von prosilver_se (<phpbb_root>/styles/prosilver_se/template/)
3) Speichere Deine Grafik ("legende.png") im korrekten Ordner von prosilver_se => <phpbb_root>/styles/prosilver_se/theme/images/
4) Mit einem geeigneten Tool erstellst Du eine verkleinerte Kopie dieser Grafik (statt 400 x 166 Pixel wie im Original z.B. runterskaliert auf 200 x 83 Pixel) und speicherst sie im gleichen Ordner als z.B. "legende_200.png" ab (die wird später dann bei allen "kleinen Displays" angezeigt werden)

5) öffne <phpbb_root>/styles/prosilver_se/template/forumlist_body.html
und füge ganz am Anfang in einer neuen Zeile ein:

Code: Alles auswählen

<div id="secondlogo"></div>

(dies ersetzt Deinen ursprünglichen Code)
=> eine ansonsten "leere" DIV als Container für Deine Grafik, die dort als Hintergrundbild eingesetzt wird

6) öffne <phpbb_root>/styles/prosilver_se/theme/stylesheet.css
suche

Code: Alles auswählen

.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}

Danach in neuer Zeile einfügen:

Code: Alles auswählen

#secondlogo {
	width: 100%;
	height: 166px;
	background-image: url("./images/legende.png");
	background-repeat: no-repeat;
	background-position: center;
}

Höhe der DIV = Höhe der Grafik => falls Du sie hochskalieren solltest, dann den Wert für "height" entsprechend der neuen Grafikhöhe anpassen.

im gleichen File füge ganz am Ende in neuer Zeile dann ein:

Code: Alles auswählen

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
	#secondlogo {
		height: 83px;
		background-image: url("./images/legende_200.png");
	}
}

Auch hier: Höhe der DIV = Höhe der verkleinerten Grafik. Falls Du auf andere Abmessungen skaliert haben solltest, dann auch hier wieder entsprechend anpassen.

Bei allen Anzeigen mit einer Anzeige/Auflösung von <500 Pix in der Breite wird jetzt die kleinere Grafik angezeigt.

[Sascha Deutsch]

Ok, wow. Danke!

Das werde ich gleich morgen ausprobieren.

Vielen lieben Dank!