liebewinter: Responsive Bilder nicht arbeite beim header Tag

Hallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone) , ich habe versuche mit diesem Code;

<body>
<header>
 <picture>
          <source media="(max-width: 47.9375em)" srcset="night_smartphone.JPG">
          <source media="(min-width:  64.0625em)" srcset="night.jpg">
          <img src="night.jpg" alt="Nachts Bild">
</picture>
</header>
..

Das Probleme der sich verendert ganze header , wie der screenshot zeigt

Bild Virtual smartphone

Der Große von meinem Bild für Smartphone 360x72 px .

Wenn schreibe auf der header Tag ,

 <header style="background-image: url('Bilder/night_smartphone.JPG'); background-repeat: no-repeat"; ></header>

Bekomme alles gut ....

Bild smartphone

aber als ich möchte verschieden Bilder habe , kann das nicht machen....

Kann Bitte jemand helfe , danke !

  1. Hallo Joseba,

    es ist nicht wirklich sinnvoll, 767 Pixel durch 16 zu teilen und dann 47.9375em als Breitenangabe zu setzen. 1em = 16px ist NICHT garantiert!

    Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, @Gunnar Bittersmann ?

    Zu deiner Frage: Das picture Element ist dazu da, einem <img> Element eine Möglichkeit für Medienabfragen zu geben. <img> ist aber nicht für Hintergrundbilder da, sondern für Bilder, die Teil des Inhalts sind. Ein <img> Element hat eventuell Margin oder Padding. Ein <header> Element auch. Und dadurch entsteht dein leerer Raum.

    Ich glaube, in deinem Header möchtest Du einen Hintergrund verwenden, der mit CSS gesetzt wird.

    Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden. Das geht so:

    header {
       background-image: url('Bilder/night_smartphone.JPG');
       background-repeat: no-repeat;
    }
    
    @media screen and (min-width: 768px) {
       header {
          background-image: url('Bilder/night.JPG');
       }
    }
    

    D.h. du setzt night_smartphone.JPG als normalen Hintergrund, und wenn der Bildschirm breit genug ist, ersetzt Du das durch night.JPG.

    Bitte denke daran, dass diese Abfragen nur richtig funktionieren, wenn Du im <head>-Bereich des HTML

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    stehen hast. Ohne diese Angabe simuliert der Smartphone-Browser einen Desktop-Bildschirm, der 900-1000 Pixel breit ist.

    Rolf

    --
    sumpsi - posui - clusi
    1. Viele Danke für deine antwort !,

      Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden

      @media screen and (min-width: 768px) {
         header {
            background-image: url('Bilder/night.JPG');
         }
      

      das habe schon auf css datei …

      @media (min-width:  48em) and (max-width: 64em) and (orientation: landscape) {
          body {
           
             display: grid;
             display: -ms-grid; 
             background-color: #eaf6e5;
             grid-row-gap: 5px;
             grid-template:  
              "header header header" auto
              "nav nav nav" auto
              "main main gap1" 1em
              "main main werb" 11em 
              "main main gap2" 3em
              "main main info" 1fr
              "footer footer footer" auto / 8% 64% 28%;
      
             
             -ms-grid-columns: 8% 64% 28%;
             -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
             -ms-grid-gap: 5px;
          
                
          }
          body > header {
               grid-area: header;
               background-image: url("Bilder/view.JPG");
               background-repeat: no-repeat;
               padding: 60px;
          }
      

      aber ich möchte haben verschiesen Große Bilder für jeden Geräte ,desktop , tablet , smartphone .

      Beispiel habe eine gemacht für creativecommons Logo…

      <footer id="copry" >
      	<p>My Website: Computer and More  © 2018. All Rights Reserved.</p>
      <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/">
      <picture>
        <source media='(max-width: 20em)' srcset='/Bilder/copry-kleine.png'>
        <source media='(max-width: 47.9375em) and (orientation: landscape)' srcset='/Bilder/copry-kleine.png'>
        <source media='(min-width: 80em)' srcset='/Bilder/copry.png'>
        <img alt="Creative Commons License" src="/Bilder/copry-kleine.png" style="width:auto;"></a>
      </picture>
      <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
      	Content of this site cannot be republished either online or offline without our permissions. </p>
      
      </footer>
      

      und alles funzioniert gut...

      1. @@ liebewinter

        @media (min-width:  48em) and (max-width: 64em) and (orientation: landscape) {
        

        Macht der media query Sinn? Warum soll das zwischen 48em und 64em im portrait mode nicht auch greifen?

               -ms-grid-gap: 5px;
        

        Das macht keinen Sinn. IE hat kein gap implementiert, d.h. -ms-grid-gap gibt es nicht.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. @@Rolf B

      Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, @Gunnar Bittersmann ?

      Bei responsive design ist die „natürliche Größe“ von Bildern irrelevant – sind doch flexible images ein Kernstück von responsive design.

      Es sollten nur genügend Pixel da sein, damit das Bild scharf ist. Und hier reden wir über ganz andere Pixel: Device-Pixel, nicht CSS-Pixel.

      Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

      night_smartphone.JPG

      Die Benennung ist wenig sinnvoll.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo Gunnar,

        das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.

        Wenn Device-Pixel relevant sind, ist dann eine Mediaquery auf em sinnvoll? Es gibt zwar Mediaqueries auf device-pixel, aber die haben noch Vendor-Prefixe. Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?

        Rolf

        --
        sumpsi - posui - clusi
        1. @@Rolf B

          Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?

          Die gute Nachricht: gar nicht – das erledigt der Browser selbst.

          Das heißt: bei srcset mit w-Angabe lädt ein Gerät mit HD-Display bei gleicher Viewportbreite (in CSS-Pixel) ggfs. eine andere Bilddatei als ein Gerät mit Nicht-HD-Display.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        2. @@Rolf B

          das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.

          Beim Fragezeichen wird vermutlich nichts passieren. Ansonsten ist U+2060 word joiner dein Freund, siehe dieses Posting unten.

          Brauche ich auch öfter auf Twitter bei diesen @- und #-Dingens.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

        Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.

        1. Hallo ottogal,

          Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.

          Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:

          « signe double, espace double » ? und ! (und auch «, », :, ;) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter. . und , sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.

          Bis demnächst
          Matthias

          --
          Pantoffeltierchen haben keine Hobbys.
          ¯\_(ツ)_/¯
          1. @@Matthias Apsel

            Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:

            Das Französische ist so ziemlich die einzige Sprache, wo vor/nach Satzzeichen geplenkt wird. Und das auch nicht überall; die Schweizer machen da nicht mit.

            AFAIK wird in iberoromanischen Sprachen nicht geplenkt. Stammt liebewinter nicht von dort?

            « signe double, espace double » ? und ! (und auch «, », :, ;) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter. . und , sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.

            Die Bauernregel stößt aber auch schnell an ihre Grenzen.

            Einfache Guillemets sind einteilig, trotzdem im Französischen (aber s.o.) mit Leerzeichen [Wikipedia]

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        2. Hallo,

          Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

          Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.

          Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.

          Gruß
          Kalk

          1. @@Tabellenkalk

            Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

            Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.

            Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.

            Kalk 1 – Plusdrücker 0.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar Bittersmann,

              Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.

              Kalk 1 – Plusdrücker 0.

              Dennoch trägt der Satz

              Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

              keine positive Botschaft.

              Bis demnächst
              Matthias

              --
              Pantoffeltierchen haben keine Hobbys.
              ¯\_(ツ)_/¯
              1. @@Matthias Apsel

                Dennoch trägt der Satz

                Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.

                keine positive Botschaft.

                Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei. Und die Kirche im Dorf lassen.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo Gunnar Bittersmann,

                  Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei.

                  Ich sehe nicht, dass ein „und Übrigens“ den Sinn der folgenden Aussage entstellt.

                  Und die Kirche im Dorf lassen.

                  Einverstanden.

                  Bis demnächst
                  Matthias

                  --
                  Pantoffeltierchen haben keine Hobbys.
                  ¯\_(ツ)_/¯
  2. @@ liebewinter

    Hallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone)

    „Desktop, Tablet, Smartphone“ hat nichts mit responsive design zu tun. Das hatten wir doch neulich erst.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. @ Gunnar Bittersman , brauchst du keine Sorge machen , ich weiss das Probleme für dich ist, weil ich nicht Fachbegriffe (Groß und Klein) benutze... ☺️

    So , zurück auf meinem Probleme…

    jetzt benutze für ansammeln meinen CSS Datei, windows.css und meine Media Query Datei, **tablet.css **,

    <link rel="stylesheet" type="text/css" href="CSS/tablet.css">
    <link rel="stylesheet" type="text/css" href="CSS/windows.css">
    

    Frühz habe mit PHP gemacht,

    <?php
    
       include 'CSS/windows.css'; 
       include 'CSS/tablet.css';
     ?>
    

    und bekomme dieser Screenshot,

    probleme auf meine Smatphone

    1. Hallo liebewinter,

      jetzt benutze für ansammeln meinen CSS Datei, windows.css und meine Media Query Datei, **tablet.css **,

      <link rel="stylesheet" type="text/css" href="CSS/tablet.css">
      <link rel="stylesheet" type="text/css" href="CSS/windows.css">
      

      type="text/css" kann auf weggelassen werden.

      Benutze nur eine Datei. Und dort @media-Direktiven.

      Bis demnächst
      Matthias

      --
      Pantoffeltierchen haben keine Hobbys.
      ¯\_(ツ)_/¯
      1. Benutze nur eine Datei. Und dort @media-Direktiven.

        Kannst du Bitte sage wie , ich verstehe nicht alles was du meinst..

        1. Hallo liebewinter,

          
          /* Festlegungen für alle Geräte, mobile first */
          
          @media (min-width: 50em) {
          
            /* Festlegungen für große Bildschirme */
          
          }
          

          https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries

          Bis demnächst
          Matthias

          --
          Pantoffeltierchen haben keine Hobbys.
          ¯\_(ツ)_/¯
          1. aber das ich schon gemacht.. , ich habe auf meine tablet.css,

            @media only screen and (min-width: 320px) 
                           and (max-width: 568px) 
                           and (orientation :  portrait) {
            body {
            
                  display: grid;
                  background-color: #eaf6e5;
                  grid-template-columns: 11% 80%  9%;
                  grid-row-gap: 3px;
                  font-size: 1.0833em;
                  margin: 1px;
                  grid-template-areas:
                   "header  header header"
                   "nav     nav   nav"
                   "main main  main"
                   "footer  footer footer";
            }
            body > header {
            
            background-image: url("Bilder/night_hoppe.JPG");
            background-repeat: no-repeat; 
            position: relative;
            
            margin-bottom: 1px; 
            position: relative;
            
            
            border-left: 1px;
            
            }
            
            nav {background-color: #d2f5c4; display: flex; }
            nav ul {list-style-type: none;  flex: 1 0 auto; padding: 0px 0px 0px 9px;}
            nav li { display: inline-block;}
            nav ul:nth-of-type(2) { text-align: left; padding: 0px 30px 0px 25px;  }
            #navs {
             padding: 1px 0px 1px;  /* Großer Nav , nur Obern und Unten   */
            }
            
            .dropdown-content a {
               padding: 10px 4px;
            
            }
            nav a {
              color: black;
              text-decoration: none;
              display: inline-block;
              padding: 0px 1px 0px 1px;
              font-size: 8px;
              font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
            } 
            body > main {
                height: 180vh;  
            }
            
            #name {font-size: 0.55em;}
            #email {font-size: 0.55em;}
            #text {font-size: 0.3em;}
            
               /* HOVER  */
            
            .dropdown:hover .dropdown-content {
            
            
              top: 18px; 
            }
            
            .link_change ul {
                margin-left: 40px;
            }    
            
            
            #img1 {float: left; margin: 1px; }
            #copry a {text-decoration: none; margin-bottom: 1px;}
            #copry p {font-size: 6px; margin-bottom: 0px; }
            
            
            }
            

            auch wenn meine Media Query habe jetzt px (ich habe so geschrieben um zu sehen ob das probleme mit em war..ich habe gesehen das sie spiele keine rolle auf meine Probleme...) , Später will em gebe...

            1. ich habe bemerke die beim Desktop macht Gleich.. , der header Tag nemmt mehr Platz und das Bild bewegt sich nach Rechte Seite , wie der Screeshot zeigt,

              Bild bewegt sich nach Rechte Seite

              1. nur zu fragen... have meine header Tag , gut gemach ?

                <?php
                 
                 header('Content-Type: text/html; Charset=utf-8');
                 mb_internal_encoding('UTF-8');
                 date_default_timezone_set('UTC');
                 error_reporting(E_ALL);
                 
                
                
                
                
                ?> 
                
                <!doctype html>
                <html lang="en">
                <head>
                
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
                
                	<title>Computer</title>
                	
                	<link rel="stylesheet" href="CSS/windows.css">
                    <link rel="stylesheet" href="CSS/tablet.css">
                
                </head>	
                	
                <header>
                  <picture class="bilder">
                    <source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)'  srcset='/Bilder/night_hoppe.JPG'/>
                    <source media='(max-width: 768px) and (orientation: landscape)' srcset='/Bilder/night_smartphone.JPG'/>
                    <source media='(min-width: 1280px)' srcset='/Bilder/night.JPG'/>
                    <img src='night_smartphone.JPG' alt='night'>
                
                 </picture>
                </header>
                
                
                
                <body>
                
                1. So , versuche mein Code vereinfacht , vielleicht ist besser das Fehler zu finde.., weil auf Desktop gleiche Probleme wie Smartphone bekomme , jetzt arbeit mit http://localhost .

                  Habe Drei Datei , hope.php wo mein html code have,

                  <?php
                   
                   header('Content-Type: text/html; Charset=utf-8');
                   mb_internal_encoding('UTF-8');
                   date_default_timezone_set('UTC');
                   error_reporting(E_ALL);
                   
                  
                  
                  
                  
                  ?> 
                  
                  <!doctype html>
                  <html lang="en">
                  <head>
                  
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
                  
                  	<title>Computer</title>
                  	
                  	   <link rel="stylesheet" href="/meine/hope/hope_windows.css">
                       <link rel="stylesheet" href="/meine/hope/hope_query.css">
                  
                  	
                  </head>	
                  
                  <header>
                    <picture class="bilder">
                      <source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)'  srcset='/meine/hope/night_hoppe.JPG'/>
                      <source media='(max-width: 768px) and (orientation: landscape)' srcset='/meine/hope/night_smartphone.JPG'/>
                      <source media='(min-width: 1280px)' srcset='/meine/hope/night.JPG'/>
                      <img src='/meine/hope/night_smartphone.JPG' alt='night'>
                  
                   </picture>
                  </header>
                  
                  <body>
                  

                  Der Rest vom html Code hier

                  dann , hope_query.css , wo mein Media Query habe,

                  @media (min-width:  1025px) and (max-width: 1280px) {
                    
                    body {
                      display: grid;
                      display: -ms-grid; 
                      background-color: #eaf6e5;
                      grid-row-gap: 5px;
                      grid-template:  
                          
                          "header header header" auto
                          "nav nav nav" auto
                          "main main gap1" 1em
                          "main main werb" 11em 
                          "main main gap2" 3em
                          "main main info" 1fr
                          "footer footer footer" auto / 8% 64% 28%;
                          
                         
                         -ms-grid-columns: 8% 64% 28%;
                         -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
                         -ms-grid-gap: 5px;
                      }
                       .dropdown-content a {
                         padding: 10px 12px;
                     }
                      .dropdown:hover .dropdown-content {
                  
                        top: 28px; 
                      } 
                      
                  
                      
                  }    
                      
                  
                  header {
                  	grid-area: header;
                  	-ms-grid-column: 1;
                      -ms-grid-column-span: 3;
                      -ms-grid-row: 1;
                      -ms-grid-row-span: 1;
                  
                    background-image: url("Bilder/view.JPG");
                    background-repeat: no-repeat;
                    background-size: cover;
                    padding: 65px;
                    
                    
                    
                      
                  }
                  
                  .
                  .
                  .
                  

                  und das letzte ,hope_windows.css , weil keine einfluß auf dieser Probleme hat , ist auch in codepen .

                  Der Screeshot von meinem Rechner,

                  screenshot von meinem Desktop