2 verschiedene Bildgrößen bei verschiedenen Bildern mit srcset definieren

Hallo liebe Leute,
ich bin neu hier und noch relativ unerfahren was Webprogrammierung angeht.. Nun bin ich gerade dabei eine Website mithilfe von Wordpress zu erstellen. Den Code schreibe ich selbst (also kein fertiges Wordpress-Template). So nun zur Frage:

Im Header habe ich mein Logo eingebunden. Bei einer Bildschrimgröße über 767px wird mein großes Logo geladen, bei weniger als 767px die kleine Version (zu sehen ist nur die Bildmarke des Logos) davon.. Dies habe ich mithilfe von srcset gemacht.
Allerdings haben das große und das kleine Logo unterschiedliche Abmessungen (großes Logo soll 115,8px mal78,6px angezeigt werden; kleines Logo 55px mal 55px). Diese würde ich auch gerne mithilfe von width und height definieren, damit die Bilder egal bei welcher Skalierung ihre Größe behalten.

Also: es sollen unterschiedliche Bilder je nach Browsergröße geladen werden, jedes Bild soll aber seine eigenen Maße besitzen..

So sieht mein Code OHNE die richtige Bildgröße von 55x55px für logo.png aus (wodurch das Bild auch verzerrt wird..)

<div id="bildlogo">
<img srcset="<?php echo get_template_directory_uri(); ?>/images/logo.png 767w,
<?php echo get_template_directory_uri(); ?>/images/LogoSchrift.gif 1068w
"
width="115,8px" height="78,6px"
alt="Mein Name" title="Mein Name den ich fürs Forum rausgelöscht habe" />
</a>
</div>

Hat jemand eine Idee? Ich verzweifel.. Über Google habe ich auch nichts gefunden.. ist das überhaupt möglich? Wenn nein, was könnte ich statt dessen machen?
Ich wäre für jeden Tipp dankbar..!

Liebe Grüße und einen schönen Abend noch

Zitat von Hero

Du solltest das Logo gegen ein kleines transparentes gif oder png austauschen und dein eigentliches Logo als Hintergrundgrafik einbinden. Dazu kannst du im Footer-Template ein bisschen CSS-Code anhängen, welches dein Logo bei der entsprechenden Browsergröße tauscht.

Wow erstmal danke für deine Antwort!
Ich bin leider, wie gesagt, nicht soo erfahren was das angeht..
Also soll ich in meiner CSS-Datei mein vorher definiertes bildlogo DIV so definieren, dass dort die Pfade der Bilder stehen. Diese werden bei einer max- Breite von 767px "getauscht".
Kann ich dann bei der php Datei das <img srccet... einfach rauslöschen? Oder muss ich dort noch etwas definieren? Bisher werden nämlich gar keine Bilder angezeigt

<div id="bildlogo">   
           <a href="https://adressefürdiewebsite/"> 
            <img srcset="<?php echo get_template_directory_uri(); ?>/images/logo.png 767w,
                         <?php echo get_template_directory_uri(); ?>/images/LogoSchrift.gif 1068w"




             width="106,4px" height="64,6px"
             alt="blablalba" title="nochmehrbla" />
          </a>
       </div>

Oder muss ich den ganzen Inhalt des DIV bildlogo rauslöschen und alles in der CSS definieren?

Vielen Dank schon mal für deine Hilfe

Zitat von Hero

Den Link würde ich im DIV-Container lassen und ein transparentes PNG verwenden.

Ahhh!Okay habe ich es verstanden! Das transparente Bild ist also nur ein Platzhalter Bild damit es funktioniert. Es wird aber direkt beim Aufruf der Seite durch das in der CSS festgelegte Bild ersetzt. Ist der Browser kleiner wird es durch das andere Bild ersetzt. Super danke
Eine Frage habe ich noch das ließ sich auch nach probieren und Googlen nicht beheben ..
Als ich das Bild im Header eingebunden habe musste ich

<img src="<?php echo get_template_directory_uri(); ?>

diesen Befehl vor den Bilderpfad setzen damit es überhaupt angezeigt wird (ich habe den header auf einer eigenen php Seite). Irgendwie wurde andernfalls der Pfad des Bildes nicht gefunden..
In der CSS müsste ich doch eig. den gleichen Fehler haben (zumindest wird das Bild ebenfalls nicht angezeigt).. jedoch scheint der gleiche Befehl in der CSS nicht zu funktionieren.. Gibt es einen extra CSS Befehl damit das Bild gefunden wird?

#bildlogo{  background: #ffffff url('Logo.png');
  background-size: 100%;
    }

So wird kein Bild gefunden (zumindest ist nur ein X und der alt Text zu sehen..

#test{  background: #ffffff url('<?php echo get_template_directory_uri(); ?>/images/logo.png');
  background-size: 100%;
    }

So wird auch nichts angezeigt

hm.. irgendwie werden dennoch keine Bilder angezeigt. Aber ich danke dir total für deine Hilfe
Ich habe deinen Ansatz verstanden und kann ihn gut nachvollziehen. Ich friemel noch etwas an dem Pfad rum und schau woran es liegen kann. Ich danke dir für deine Hilfe!!
Ohne deine Idee wäre ich vermutlich immer noch total verzweifelt Jetzt muss ich nur noch meinen eigenen Fehler finden :o:o:o

OMG ich habe es hinbekommen danke nochmal!
Ich war tatsächlich einfach zu blöd den richtigen Link zu nehmen.. Ich dachte das müsste ein "dynamischer Link" mit der <?php echo get_template_directory_uri(); ?>/images/logo.png Funktion sein. So habe ich vorher Bilder einfügen können, deren Pfad sich ändert.

Geht man aber direkt zu WordPress, klickt die hochgeladenen Bilder an und kopiert einfach deren Pfad ist das schon richtig.

Dazu muss man darauf achten dass bei @media ebenfalls die background-size mit 100% angegeben wird. Sonst funktioniert das nicht.

#test{  background: #ffffff url('https://blablabla/wp-content/uploads/2016/12/LogoSchrift.png');
  background-size: 100%;
  width: 106.4px;
  height: 64.6px;
    }












  @media screen and (max-width: 767px){
      #test{
            background: #ffffff url('https://blablabla/wp-content/uploads/2016/12/Logo.png');
            background-size: 100%;
            width: 34.3px;
            height: 32.3px;
        }
    }

In der header.php muss ich dann aber als Pfad wieder den 'dynamischen' link angeben. Sonst findet er die transparente Datei nicht. Für den Fall das mal jemand das gleiche Problem hat und ihm dadurch geholfen wird.

Vielen Dank noch mal an Hero Ohne Deine Hilfe hätte ich vermutlich meinen PC aus dem Fenster geworfen