Header-Image an Bildschirmgröße automatisch anpassen

ChiefIntensiv

Zitat von Stef
Nein brauchst du nicht.

Es geht mit dem img-tag. So sieht es dann aus in HTML ohne id oder class hinzuzufügen:
HTML
<img src="hierdeinbild" alt="Beispieltext" >
Wenn man nun noch eine class hinzufügen möchte fügt man einfach class="deinclassname" hinzu:
HTML
<img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >
Und wenn du nun diesen class name (deinclassname) in css aufrufen willst geht es mit dem . Selektor :

Deine HTML Datei :
HTML
<img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >
Und css dazu:
Code
.deinclassname {

}
mit .deinclassname sprichst du dann die class im img tag an und kannst somit schon loslegen mit css.

Stef
Alles anzeigen

hi stef !

Das heißt ich füge den HTML Code dann einfach in Wordpress unter Editor im stylesheet.php ein, hab ich das richtig verstanden? Und wo im stylesheet füge ich den Code ein?

Gruß

ChiefIntensiv

Hallo Zusammen,

habe es jetzt endlich geschafft !!!

Ich wusste nicht dass ich unter header.php diesen HTML Code eingeben musste damit das ganze greift.

Also habe ich mein Bild jetzt im header.php folgenden HTML code eingebene

PHP

<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
[COLOR=#ff0000][size=10]  [B]            <img class="headerbild" src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg" alt="header" >[/B][/SIZE][/COLOR]
            </a>

und dann im stylesheet.php folgenden Code

Code

img.headerbild {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 4px auto;
}

Vielen Dank an Stef, Nassar und MrMurphy. Ohne euch hätte ich das nicht geschafft.

Jetzt kommt man zwar nicht mehr zu Startseite wenn man auf den Header klickt - aber das ist mir nicht so wichtig wie dass der Header richtig skaliert auch bei kleineren Bildschirmen.
Wenn ihr noch einen Tipp habt wie diese Funktion wieder einbaue dann wäre das super, ist aber im Moment nicht so notwendig.

Danke Nochmals

Viele Grüße

djheke

Code

[COLOR=#0000ff]<a href="http://test-66838.alfa3044.alfahosting-server.de/"[/COLOR]>[COLOR=#ff0000]<img class="serwus" src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg" alt="header">[/COLOR][COLOR=#0000ff]</a>[/COLOR]

MrMurphy

Hallo

Ich habe mal ein Beispiel für ein Responsive Design erstellt.

Das Bild wurde dazu in mehrere Einzelbilder zerlegt.

Das Logo behält seine Größe unabhängig von der Fenterbreite so weit möglich bei.

Die restlichen Bilder werden bei schmalerem Fenster nach und nach ausgeblendet, so dass ihr Inhalt erkennbar bleibt.

Testseite ChiefIntensiv

Gruss

MrMurphy

ChiefIntensiv

Zitat von djheke

Code

[COLOR=#0000ff]<a href="http://test-66838.alfa3044.alfahosting-server.de/"[/COLOR]>[COLOR=#ff0000]<img  class="serwus"  src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg"  alt="header">[/COLOR][COLOR=#0000ff]</a>[/COLOR]

Super vielen Dank !

Zitat von MrMurphy

Hallo

Ich habe mal ein Beispiel für ein Responsive Design erstellt.

Das Bild wurde dazu in mehrere Einzelbilder zerlegt.

Das Logo behält seine Größe unabhängig von der Fenterbreite so weit möglich bei.

Die restlichen Bilder werden bei schmalerem Fenster nach und nach ausgeblendet, so dass ihr Inhalt erkennbar bleibt.

Testseite ChiefIntensiv

Gruss

MrMurphy

Alles anzeigen

Auch das ist eine schöne Alternative um den Header an die jeweilige Fensterbreite anzupassen !
Gefällt mir ausgesprochen gut!

Gruß

ChiefIntensiv

Tags