nicht angemeldet
Responsive Bilddateien
0 
Matthias Scharwies
Responsive Bilddateien
Gunnar BittersmannGuten Abend allerseits,
ich suche Hilfe in Sachen responsive Bildfdateien.
Ich habe eine Webseite, die nur aus einem Foto besteht, als Teaser, mit Weiterleitung auf die (noch) aktuelle Webseite (teste aber hier: http://www.nocturnalhall.com/Vic/vikke.php)
Das Foto soll natürlich responsive sein. Ist es ja auch, aber mit Platz nach unten. Deswegen versuche ich seit Stunden mit srcset oder <picture> hinzubekommen, dass die Bilder ausgetauscht werden, erhalte aber immer nur ne weiße Seite. Was mache ich falsch?
<style>
body {
background:#FFF;
}
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<picture>
<source media="(min-width:50em)" srcset="vikke_large.jpg">
<source srcset="vikke_small.jpg">
<img src="vikke_medium.jpg" alt="VikKe">
</picture>
</body>
oder eben
<body>
<img src="vikke_large.jpg" alt="VikKe"
srcset="vikke_large.jpg 1920w, vikke_medium.jpg 960w, vikke_small.jpg 480w">
</body>
Ich danke schonmal im vorraus :)
-
Serrvus Berrnd!
Deswegen versuche ich seit Stunden mit srcset oder <picture> hinzubekommen, dass die Bilder ausgetauscht werden, erhalte aber immer nur ne weiße Seite. Was mache ich falsch?
<picture> <source media="(min-width:50em)" srcset="vikke_large.jpg"> <source srcset="vikke_small.jpg"> <img src="vikke_medium.jpg" alt="VikKe"> </picture>Wenn selbst beim img nichts erscheint, tippe ich auf eine falsche Referenzierung:
- In welchem Ordner befinden sich die Bilder?
- Sind die Bildnamen genauso wie das src-, bzw. srcset-Attribut geschrieben?
- (Ich hatte mal scr anstelle von src geschreiben und lange gesucht!)
- Groß- und Kleinschreibung, bes, bei
.JPGund.jpg.
Herzliche Grüße Matthias
Matthias Scharwies
--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim-
Hahahaha... Ich Dussel! Ja, es war der Name der Bilddatei, mit Großbuchstabe und nicht klein... Jetzt funktioniert es. Ich sehe allerdings, daß ich noch ein Bild für die Tablet-Größe hinzufügen oder noch ein bisschen an den Größen drehen sollte. Danke Matthias, ich sehe wieder Bäume im Wald ;)
-
Ich habe noch eine Frage: Man muss ja jetzt z.B. auf dem PC Bildschirm scrollen, um das gesamte Bild zu sehen. Gibt es eine Anweisung, die das Bild so groß macht, wie der jeweilige Bildschirm ist, ohne zu scrollen?
-
@@Dajana
Ich habe noch eine Frage: Man muss ja jetzt z.B. auf dem PC Bildschirm scrollen, um das gesamte Bild zu sehen. Gibt es eine Anweisung, die das Bild so groß macht, wie der jeweilige Bildschirm ist, ohne zu scrollen?
Du hast ja schon
max-width: 100%. Wenn du das noch ummax-height: 100vhergänzt …Womit wir bei der Frage wären: wie soll’s denn aussehen? Das Bild so verkleinern, dass es in der Höhe passt? Dann füllt es aber die Breite nicht mehr aus.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Ja stimmt, ist doof mit der Höhe. Ich lass es einfach so wie es ist :) Danke für die Hilfe :)
-
-