Skalierbare bilder im responsiven header 
Autor: Wolf-Peter F.Hallo,
ich habe auf meiner webseite www.wusyen.de ein responsives Design eingerichtet, mit den Größen 1024, 768, 640, 480, 360, 320 px. Über das Menü "Struktur der Vorlage" habe ich im Header je responsive Darstellung ein Bild eingefügt. Das Ausgangsbild hat die Größe 1024x294. Dieses Bild habe ich für die anderen responsiven Größen entsprechenden verkleinert und eingefügt. In den kleinen Größen ist die Bildqualität nicht so gut.
Dann habe ich auf dem PC probiert, ob ich über das Menü "Inhalt des Headers und der Fußzeile" für jede responsive Einstellung einen HTML-Code einfügen kann. Mit den folgenden Einstellungen:
html
<img src="style/wusyen_head_1024.png"
class="bild"
width="1024"
height="294"
css
CSS.bild {
width: 100%;
height: auto;
}
Wenn ich hier für jede responsive Darstellung einen an die Größe angepassten HTML-Code mit "Breite und Höhe" einfügen könnte, dann hätte ich für jede Bildschirdarstellung ein skaliertes Bild.
Das Problem im Programm ist aber, dass die Anpassung eines HTML-Codes z.B. bei 1024 px sich sofort auf die anderen HTML-Codes in den anderen Größen 768, 640... automatisch überträgt und die ursprüngliche Einstellung quasi überschrieben wird. Im Ergebnis stehht dann in jedem HTML-Code der jeweiligen responsiven Einstellung z. B. die Angaben width="1024", height="294". Wieso behält nicht jeder HTML-Code seine eigene Einstellung?
Ziel ist es, ausgehend von einer Bildgröße 1024x294 skalierbare Bilder in den anderen responsiven Größen zu erhalten.
Wer hat hier bereits Erfahrungen gemacht...
Ich weis nicht was dies für ein Code ist da oben? JEdenfalls so bringt er dir nichts! Angenommen du hast den richtigen HTML Code und CSS Code geschrieben und es zeigt die Headergrafik an, dann hast du den Header überschrieben. Dadurch werden die anderen Breakpoints auch überschrieben mit der Desktopgrafik. WEnn dann müsstest du mediaquery anwenden für jeden Breakpoint den richtigen CSS Code mit der Breite für diesen Bereich. Wobei das Bild und der HTML-Code gleich bleiben kann.
@media(max-width: 1023px) and (min-width: 768px)
Autor
...vielen Dank für die Antwort.
Mit dem Code "@media..." hat bei mir nicht so richtig funktioniert, aber ich habe noch einiges anderes probiert und folgende Variante gefunden:
als HTML-Code habe ich eingetragen:
<img
src="style/wusyen_head_1024.png"
alt=""
<img
als CSS-Code habe ich eingetragen:
img {
width:100%;
height:auto;
}
Ich hab alles auf auf www.wusyen.de übertragen und die Bildgrößen werden nun entsprechend der Breakpoints skaliert. Wunderbar