von Eigentlich sah es auf dem PC-Bildschirm super aus, aber auf dem Smartphone-Bildschirm war Augenkrebs angesagt, als ich ein Icon in der eigentlich passenden Auflösung als png-Datei in die Navbar eines Webseiten-Projekts eingebaut habe.
Das Problem haben laut Recherche wohl auch andere Leute. Die einzige brauchbare Lösung, bei der ich ausgekommen bin, ist es, das Logo in einer höheren Auflösung abzuspeichern, als in der es nachher angezeigt wird.
Per CSS habe ich dieses dann wieder „verkleinert“ bzw. an die Navbar-Größe angeglichen. Auf dem PC-Bildschirm hat sich dadurch optisch nichts geändert, aber auf dem Smartphone sieht es nun endlich nicht mehr beschissen aus 😀
Mit dem Höhenwert muss man allerdings rumspielen. Anfangs habe ich diesen für das img-Element in der Navbar auf 100% eingestellt. Dann wurde es aber zu klein angezeigt. Bei mir passt es mit 200% am besten.
Der CSS-Code sieht nun so aus:
|
1 2 3 4 5 |
.navbar-brand img { height: 200%; max-width: 100%; display: block; } |
Das Icon lag vorher in der Auflösung von 46 x 36 Pixel vor. Stattdessen ist es jetzt etwa doppelt so groß, mit einer Auflösung von 90 x 70 Pixel. Eine Verdopplung der Auflösung sollte also mehr als ausreichen 😉
Je nach Bootstrap-Template bzw. anderen CSS-Regeln kann es aber auch sein, dass die prozentuale Höhenangabe nicht funktioniert. Dann kann man auch einfach einenf esten Pixel-Wert für die Höhe nehmen:
|
1 2 3 4 5 |
.navbar-brand img { height: 40px; max-width: 100%; display: block; } |
