Я помещаю тег img в документ, не зная ширины/высоты соответствующего изображения:
<img src="/myimage.png" />
Я хочу использовать CSS для масштабирования изображения до половины своего "родного" размера (размер основного изображения). Я не могу понять, как это сделать.
- Использование
width: 50%будет иметь размер относительно содержащего блока, а не изображение. - Я не могу настроить размер определенной ширины пикселей, потому что я не знаю размер изображения.
-
Поскольку мне нужно только поддерживать WebKit, я попытался использовать преобразование:
-webkit-transform: scale(0.5);Это позволяет легко отрегулировать изображение, но не изменяет размер самого элемента изображения.
- @Radagaisus предлагает использовать Javascript, который является хорошим резервом. Однако это на ультралегкой мобильной странице, поэтому я не могу использовать jQuery, и обработка всех обработчиков onload() вручную была бы болью.
Как постскриптум: зачем я это делаю? Потому что мне нужно обработать дисплей Retina. Я могу обнаружить его с помощью devicePixelRatio и заполнить более крупные (2x) изображения, но мне нужно уменьшить их до 50%, чтобы выглядеть корректно на дисплее.