HTML - Picture Tag no funciona en header-Element

 
Vista:
sin imagen de perfil

Picture Tag no funciona en header-Element

Publicado por Joseba (3 intervenciones) el 13/04/2019 13:43:20
Aupa , llevo mas de una semana con este problema , he preguntado en diferentes Forum y nadie me ha podido responder... .

Mi Pagina Web la he hecho con Grid Layout .
Mi problema es que quiero hacer una Media Query Image para Desktop, tablet y smartphone , pero en los tres , el header-Element se hace mas grande y la foto se mueve hacia la derecha.. , como el problema es en los tres accesorios , y para hacer mi problema mas facil de entender , doy aqui el Code para Descktop , trabajo en http://localhost .

Tengo tres Archivos ;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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>

El resto del html codehttps://codepen.io/mezb/pen/eoWLMd

hope_query.css , donde tengo mi Media Query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@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;
 
 
 
 
}
 
.
.
.
y el ultimo ,hope_windows.css , donde tengo el CSS Code , pero que no tiene influencia en mi problema , porque lo que tengo aqui, es solo para otros Element y Tags , pero lo podeis mirar aqui https://codepen.io/mezb/pen/eoWLMd .

Un Screenhot como mi desktop seve, hoIYefQ .

Me podria algien ayudar con este Problema ?, Gracias !
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Picture Tag no funciona en header-Element

Publicado por Joseba (3 intervenciones) el 14/04/2019 16:04:46
En mi server lo he consegido dando a Grid un nuevo Element en mi archivo hope_query.css , melas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
 
    display: grid;
 
    display: -ms-grid;
 
    background-color: #eaf6e5;
 
    grid-row-gap: 5px;
 
    grid-template:
 
 
 
        "melas melas melas" 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%;
.
.
.
}
 
 
.mela {
 
   grid-area: melas;
   background-image: url('/meine/hope/night.JPG');
   width: 100%;
   height: 140px;
   background-size: 100% auto;
 
 
}
.
.
.

Luego en mi archivo hope.css , e construido un div y le he dado un class , de nombre, mela ,
1
2
3
4
5
6
7
8
9
10
11
12
</head>
 
<div class="mela">
  <picture class="bilder">
    <source media='(min-width: 1280px) srcset='/meine/hope/night.JPG'/>
      <img src='/meine/hope/night_smartphone.JPG' alt='night'>
   </picture>
</div>



<body>

como seve en el screenshot lo he "consegido"...
JBMXxx5

Lo pongo entre parentesis , porque intento hacerlo en mi pagina Web , http://htmlkurss.xyz/index.php , y no me sale igual....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Picture Tag no funciona en header-Element

Publicado por Joseba (3 intervenciones) el 14/04/2019 21:26:21
Bueno, lo consegui !

Tenia estos problemas :

- El heard Element (la cabeza) de la Website y el Tag Picture no se llevan my bien en el Layout Grid ...

asi que lo he solucionado con div , y le he dado un class con el nombre mela en el archivo hope.php .

1
2
3
4
5
6
7
8
<div class="mela">
  <picture class="bilder">
    <source media='(min-width: 320px)' srcset='/meine/hope/smartphone_night.JPG'>
   <source media='(min-width:  1280px)'  srcset='/meine/hope/night.JPG'>
  </picture>
</div>
 
<body>




He cometido un error con el Tag picture.... , mi problema era con

1
<img src='/meine/hope/night_smartphone.JPG' alt='night'>

como estoy aprendiendo , he visto en muchos ejemplos que usaban el Tag img dentro del Tag picture , y ese era otro error... , este Tag lo que hacia , es duplicar las Fotos ..... . asi que ahora no esta mas en mi Tag picture .

- Luego , en mi archivo hope_query.css , he creado el Element melas .

1
2
3
4
5
6
7
8
9
10
11
12
grid-template:
 
 
 
        "melas melas melas" 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%;

en el mismo archivo he creado con mi class mela , los Tags que necesito para que se vean bien la Foto .

1
2
3
4
5
6
7
8
.mela {
 
   grid-area: melas;
   background-image: url('/meine/hope/night.JPG');
   width: 100%;
   height: 140px;
   background-size: 100% auto;
}

como seve ahora en Dektop http://htmlkurss.xyz/windows11.php

y en un Smartphone....

azS4M4o
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar