• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] srcset: Bilder nicht skalieren

Status
Für weitere Antworten geschlossen.

Philux

Neues Mitglied
Hallo,

ich möchte gerne verschiedene Bilder, abhängig von der Fensterbreite einblenden. Soweit bekomme ich das auch mit srcset hin.

HTML:
 <img src="./pix/fallback.jpg" srcset="./pix/bild-schmal.jpg 600w, ./pix/bild-breit.jpg 1200w" >

Allerdings werden das schmale und das breite Bild skaliert, wenn sich die Fensterbreite ändert. Ich benötige diese aber, unabhängig von der Fensterbreite, in Originalgröße ohne Skalierung.

Hat jemand eine Idee, wie ich das realisieren kann?
 
Werbung:
Hallo

Hast du einen Link zu der Seite?

Allgemein:

srcset hat mit dem Skalieren von Bildern nichts zu tun. Grundsätzlich werden Bilder von den Browsern auch nicht skaliert.

Deshalb muss die CSS-Anweidung gesucht und gelöscht werden, die das Skalieren ermöglicht. Häufig ist das die Anweisung

Code:
max-width: 100%;

Gruss

MrMurphy
 
Wenn ich ein Bild mit img src einbinde, wird es nicht skaliert. Daher kam ich gar nicht auf die Idee, im CSS zu schauen.

Momentan teste ich lokal. Aber wenn ich es nicht hinbekomme, stelle ich es mal online.
 
Werbung:
Bei dem Code im ersten Post werden bild-schmal und bild-breit skaliert.

Wenn ich aber
HTML:
<img src="./pix/bild.jpg" >
nehme, wird das Bild nicht skaliert.
 
Werbung:
Die Skalierung ist mit Deinem verwendeten Code normal
Das habe ich schon vermutet, daher suche ich ja eine andere Lösung zur Realisierung.

Eine weitere Möglichkeit neben "srcset + x-Wert" wäre https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/#chapter8 / Demo (im anhänglichen CSS ohne width:100%, um die CSS-Skalierung abzuschalten).
x-Wert nütz mir wohl nichts, da geht es ja um die Pixeldichte des Displays. Ich brauche aber die Pixelbreite des Anzeigefensters.
Die Demo skaliert ja. Ich gehe mal davon aus, dass du sagen willst, das es ohne die Angabe von width nicht skalieren würde. Das würde ja mit der Aussage von MrMurhpy übereinstimmen. Ich muss das heute Abend mal testen.
 
Danke, das sieht schon mal so aus, wie ich es haben will. Mal schauen, ob ich das bei mir eingebaut bekomme.

Das mit dem 1x und 2x geht ja doch, das habe ich dann wohl falsch verstanden.

Im Konjunktiv formuliert, weil <picture> nicht von allen Browser(Versionen) unterstützt wird
Wäre bei <srcset> auch so, aber dafür gibt es ja dann das Fallback-Bild.
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben