图片标头元素

Question

我希望在标题Element上构建响应图像，我有3张图像，其中2张用于智能手机，一幅用于定向：纵向，另一幅用于定向：横向，另外一幅用于桌面。 ， 我有两个文件，一个用于Css标签， windows.css ，另一个用于我的媒体查询， tablet.css ，两者都与此链接

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

我尝试使用这些代码将响应式图片应用于标题元素；

<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_smartphone.JPG'/>
    <img src='night_smartphone.JPG' alt="night"/>

 </picture>
</header>

和我的智能手机媒体查询

@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; }


}

我的HTML和CSS代码here

我的问题是要获得这些屏幕截图

我必须搜索small图片，但每次都要使用类似的截图...。我不知道为什么要这么做。...

任何人都可以帮我找到解决问题的方法，谢谢！