Responsive Bilder nicht arbeite beim header Tag
liebewinter
Responsive Bilder nicht arbeite beim header Tag
liebewinter
Rolf B
Gunnar Bittersmann
Matthias Apsel
TabellenkalkHallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone) , ich habe versuche mit diesem Code;
<body>
<header>
<picture>
<source media="(max-width: 47.9375em)" srcset="night_smartphone.JPG">
<source media="(min-width: 64.0625em)" srcset="night.jpg">
<img src="night.jpg" alt="Nachts Bild">
</picture>
</header>
..
Das Probleme der sich verendert ganze header , wie der screenshot zeigt
Der Große von meinem Bild für Smartphone 360x72 px .
Wenn schreibe auf der header Tag ,
<header style="background-image: url('Bilder/night_smartphone.JPG'); background-repeat: no-repeat"; ></header>
Bekomme alles gut ....
aber als ich möchte verschieden Bilder habe , kann das nicht machen....
Kann Bitte jemand helfe , danke !
-
Hallo Joseba,
es ist nicht wirklich sinnvoll, 767 Pixel durch 16 zu teilen und dann 47.9375em als Breitenangabe zu setzen. 1em = 16px ist NICHT garantiert!
Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, @Gunnar Bittersmann ?
Zu deiner Frage: Das picture Element ist dazu da, einem <img> Element eine Möglichkeit für Medienabfragen zu geben. <img> ist aber nicht für Hintergrundbilder da, sondern für Bilder, die Teil des Inhalts sind. Ein <img> Element hat eventuell Margin oder Padding. Ein <header> Element auch. Und dadurch entsteht dein leerer Raum.
Ich glaube, in deinem Header möchtest Du einen Hintergrund verwenden, der mit CSS gesetzt wird.
Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden. Das geht so:
header { background-image: url('Bilder/night_smartphone.JPG'); background-repeat: no-repeat; } @media screen and (min-width: 768px) { header { background-image: url('Bilder/night.JPG'); } }D.h. du setzt night_smartphone.JPG als normalen Hintergrund, und wenn der Bildschirm breit genug ist, ersetzt Du das durch night.JPG.
Bitte denke daran, dass diese Abfragen nur richtig funktionieren, wenn Du im <head>-Bereich des HTML
<meta name="viewport" content="width=device-width, initial-scale=1">stehen hast. Ohne diese Angabe simuliert der Smartphone-Browser einen Desktop-Bildschirm, der 900-1000 Pixel breit ist.
Rolf
--
sumpsi - posui - clusi-
Viele Danke für deine antwort !,
Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden
@media screen and (min-width: 768px) { header { background-image: url('Bilder/night.JPG'); }das habe schon auf css datei …
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) { 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; } body > header { grid-area: header; background-image: url("Bilder/view.JPG"); background-repeat: no-repeat; padding: 60px; }aber ich möchte haben verschiesen Große Bilder für jeden Geräte ,desktop , tablet , smartphone .
Beispiel habe eine gemacht für creativecommons Logo…
<footer id="copry" > <p>My Website: Computer and More © 2018. All Rights Reserved.</p> <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"> <picture> <source media='(max-width: 20em)' srcset='/Bilder/copry-kleine.png'> <source media='(max-width: 47.9375em) and (orientation: landscape)' srcset='/Bilder/copry-kleine.png'> <source media='(min-width: 80em)' srcset='/Bilder/copry.png'> <img alt="Creative Commons License" src="/Bilder/copry-kleine.png" style="width:auto;"></a> </picture> <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. Content of this site cannot be republished either online or offline without our permissions. </p> </footer>und alles funzioniert gut...
-
@@ liebewinter
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {Macht der media query Sinn? Warum soll das zwischen 48em und 64em im portrait mode nicht auch greifen?
-ms-grid-gap: 5px;Das macht keinen Sinn. IE hat kein gap implementiert, d.h.
-ms-grid-gapgibt es nicht.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
@@Rolf B
Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, @Gunnar Bittersmann ?
Bei responsive design ist die „natürliche Größe“ von Bildern irrelevant – sind doch flexible images ein Kernstück von responsive design.
Es sollten nur genügend Pixel da sein, damit das Bild scharf ist. Und hier reden wir über ganz andere Pixel: Device-Pixel, nicht CSS-Pixel.
Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
night_smartphone.JPG
Die Benennung ist wenig sinnvoll.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.
Wenn Device-Pixel relevant sind, ist dann eine Mediaquery auf em sinnvoll? Es gibt zwar Mediaqueries auf device-pixel, aber die haben noch Vendor-Prefixe. Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?
Die gute Nachricht: gar nicht – das erledigt der Browser selbst.
Das heißt: bei
srcsetmitw-Angabe lädt ein Gerät mit HD-Display bei gleicher Viewportbreite (in CSS-Pixel) ggfs. eine andere Bilddatei als ein Gerät mit Nicht-HD-Display.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
@@Rolf B
das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.
Beim Fragezeichen wird vermutlich nichts passieren. Ansonsten ist U+2060 word joiner dein Freund, siehe dieses Posting unten.
Brauche ich auch öfter auf Twitter bei diesen @- und #-Dingens.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.
-
Hallo ottogal,
Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.
Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:
« signe double, espace double »
?und!(und auch«,»,:,;) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter..und,sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯-
@@Matthias Apsel
Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:
Das Französische ist so ziemlich die einzige Sprache, wo vor/nach Satzzeichen geplenkt wird. Und das auch nicht überall; die Schweizer machen da nicht mit.
AFAIK wird in iberoromanischen Sprachen nicht geplenkt. Stammt liebewinter nicht von dort?
« signe double, espace double »
?und!(und auch«,»,:,;) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter..und,sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.Die Bauernregel stößt aber auch schnell an ihre Grenzen.
Einfache Guillemets sind einteilig, trotzdem im Französischen (aber s.o.) mit Leerzeichen [Wikipedia]
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Hallo,
Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.
Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.
Gruß
Kalk-
@@Tabellenkalk
Und BTW: Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.
Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.
Kalk 1 – Plusdrücker 0.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar Bittersmann,
Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.
Kalk 1 – Plusdrücker 0.
Dennoch trägt der Satz
Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
keine positive Botschaft.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯-
@@Matthias Apsel
Dennoch trägt der Satz
Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.
keine positive Botschaft.
Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei. Und die Kirche im Dorf lassen.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar Bittersmann,
Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei.
Ich sehe nicht, dass ein „und Übrigens“ den Sinn der folgenden Aussage entstellt.
Und die Kirche im Dorf lassen.
Einverstanden.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯
-
-
-
-
-
-
-
-
@@ liebewinter
Hallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone)
„Desktop, Tablet, Smartphone“ hat nichts mit responsive design zu tun. Das hatten wir doch neulich erst.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
@ Gunnar Bittersman , brauchst du keine Sorge machen , ich weiss das Probleme für dich ist, weil ich nicht Fachbegriffe (Groß und Klein) benutze... ☺️
So , zurück auf meinem Probleme…
jetzt benutze für ansammeln meinen CSS Datei, windows.css und meine Media Query Datei, **tablet.css **,
<link rel="stylesheet" type="text/css" href="CSS/tablet.css"> <link rel="stylesheet" type="text/css" href="CSS/windows.css">Frühz habe mit PHP gemacht,
<?php include 'CSS/windows.css'; include 'CSS/tablet.css'; ?>und bekomme dieser Screenshot,
-
Hallo liebewinter,
jetzt benutze für ansammeln meinen CSS Datei, windows.css und meine Media Query Datei, **tablet.css **,
<link rel="stylesheet" type="text/css" href="CSS/tablet.css"> <link rel="stylesheet" type="text/css" href="CSS/windows.css">type="text/css"kann auf weggelassen werden.Benutze nur eine Datei. Und dort @media-Direktiven.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯-
Benutze nur eine Datei. Und dort @media-Direktiven.
Kannst du Bitte sage wie , ich verstehe nicht alles was du meinst..
-
Hallo liebewinter,
/* Festlegungen für alle Geräte, mobile first */ @media (min-width: 50em) { /* Festlegungen für große Bildschirme */ }https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯-
aber das ich schon gemacht.. , ich habe auf meine tablet.css,
@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; } }auch wenn meine Media Query habe jetzt px (ich habe so geschrieben um zu sehen ob das probleme mit em war..ich habe gesehen das sie spiele keine rolle auf meine Probleme...) , Später will em gebe...
-
ich habe bemerke die beim Desktop macht Gleich.. , der header Tag nemmt mehr Platz und das Bild bewegt sich nach Rechte Seite , wie der Screeshot zeigt,
-
nur zu fragen... have meine header Tag , gut gemach ?
<?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="CSS/windows.css"> <link rel="stylesheet" href="CSS/tablet.css"> </head> <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.JPG'/> <img src='night_smartphone.JPG' alt='night'> </picture> </header> <body>-
So , versuche mein Code vereinfacht , vielleicht ist besser das Fehler zu finde.., weil auf Desktop gleiche Probleme wie Smartphone bekomme , jetzt arbeit mit http://localhost .
Habe Drei Datei , hope.php wo mein html code have,
<?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>Der Rest vom html Code hier
dann , hope_query.css , wo mein Media Query habe,
@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; } . . .und das letzte ,hope_windows.css , weil keine einfluß auf dieser Probleme hat , ist auch in codepen .
Der Screeshot von meinem Rechner,
-
-
-
-
-
-
-
