liebewinter: Responsive Bilder nicht arbeite beim header Tag

Beitrag lesen

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