[HTML] Picture Tag non funziona in header-Element

Discussione in 'HTML e CSS' iniziata da mendia, 13 Aprile 2019.

Tag (etichette):
  1. mendia

    mendia Nuovo Utente

    Registrato:
    1 Ottobre 2018
    Messaggi:
    8
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Occupazione:
    facio tutti lavori
    Località:
    Hanover
    Ciao , scusarmi per il mio italo-spagnolo... , è da piu una Settimana che cerco una soluzione per il mio Problema , é scrito in diversi Forum(Inglese , spagnolo e Tedesco) , ma nesuno mi a risposto al mio Problema ...

    La mia Pagina Web e fatta con Grid Layout .

    Voglio fare una Media Query Image per Desktop, Tablet e Smartphone .Nello tre apparecchi , il header-Element si fa grossa e la foto gira a destra .... , come il mio problema é in li tre apparecchi e per semplificare il Code , scrivo qua il code per Desktop , lavoro in http://localhost .

    Cello Tre File .

    hope.php , dove cello il mio html code,
    HTML:
    <!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>
    Il resto dello Code qua .

    Dopo cello il hope_query.css , per il mio Media Query ,

    Codice:
    @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;
     
     
     
     
    }
    
    .
    .
    .
    e il ultimo , hope_windows.css , perche non cella nesun effecto nello mio problema , non lo scrivo , ma se lo volete guardare , é qua .

    Uno Screenshot del mio Computer ,
    [​IMG]
    [​IMG]

    Mi potete aiutare per risolvere queste problema , Gracie !
     
    Ultima modifica: 13 Aprile 2019
Sto caricando...

Condividi questa Pagina