Zeigen Sie das Bild mit 50% seiner "nativen" Größe an ⇐ CSS

[Anonymous]

Ich stelle ein IMG -Tag in ein Dokument ein, ohne die Breite/Höhe des entsprechenden Bildes zu kennen:

Code: Select all

[img]/myimage.png[/img]
< /code>

Ich möchte CSS verwenden, um das Bild auf genau die Hälfte seiner "nativen" Größe (die Größe des zugrunde liegenden Bildes) zu skalieren. Ich kann nicht herausfinden, wie das geht. Transformation: < /p>

-webkit-transform: scale(0.5);
< /code>

Dies passt das Bild gut an, ändert jedoch nicht die Größe des Bildelements selbst.  
 @radagaisus schlägt vor, JavaScript zu verwenden, was ein guter Fallback ist. Dies befindet sich jedoch auf einer ultra -leichten mobilen Seite, daher kann ich JQuery nicht verwenden, und es wäre ein Schmerz, mit allen Onload () Handlern zu handhaben. Weil ich das Retina -Display behandeln muss. Ich kann es mithilfe von DevicePixelRatio 

erkennen und größere (2x) Bilder ausfüllen, aber ich muss sie auf 50% skalieren, um auf der Anzeige korrekt auszusehen.