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 ;
El resto del html codehttps://codepen.io/mezb/pen/eoWLMd
hope_query.css , donde tengo mi Media Query
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,
.
Me podria algien ayudar con este Problema ?, Gracias !
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;}...Un Screenhot como mi desktop seve,
.Me podria algien ayudar con este Problema ?, Gracias !
Valora esta pregunta
0
