Масштаб преобразования изображения в мобильном приложении работает неправильно

Question

Масштаб преобразования изображения в мобильном приложении работает неправильно

0

У меня есть изображение, например:

100x100

а также

<div>
    <img src="someimage.jpg" />
</div>

тогда:

-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);

Я тестирую на мобильных телефонах iphone 5, samsung и других, сами изображения масштабируются, но в div он выглядит одинаковым, визуально я вижу 20x20px, но в блоке на самом деле 100x100, мой вопрос в том, как чтобы избежать этого?

user3016968 01 дек. 2013, в 11:27

Источник

Теги:

html

css

1 ответ

Ещё вопросы

czuendorf · Answer 1 · 2013-12-01T08-31-00.000Z

Масштабирование не изменяет используемое пространство элемента DOM. Это связано с тем, что вы не можете определить форму элемента в некоторых случаях использования преобразования, например translate3d.

Но вы можете установить изображение в качестве фонового изображения, масштабировать его до x 100%, y 100% и установить ширину/высоту изображения.

Вы должны использовать трюк с фоновым изображением, потому что установка ширины/высоты приведет к тому, что изображение будет выглядеть очень пиксельно.