изображение тега в заголовке элемента

Question

Я хочу, чтобы адаптивные изображения строились на элементе заголовка, у меня есть три изображения, два для смартфона, одно для ориентации: портретное, другое для ориентации: альбомная и еще одно для рабочего стола. , У меня есть два файла, один для моих тегов 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 здесь

Моя проблема в том, чтобы прийти эти скриншоты,

Мне нужно искать с маленькими изображениями, но каждый раз, чтобы появиться похожий скриншот .... Я не знаю, зачем это делать ....

Может кто-нибудь помочь мне найти решение моей проблемы, спасибо!