Большое изображение в jQuery Mobile

У меня есть большое изображение (685 × 900, всего 25 килобайт в PNG), и мне нужно показать его в «контенте», настроенном на размер экрана, и с возможностью масштабирования с помощью пальцы.Большое изображение в jQuery Mobile

Теперь, когда:

<div data-role="content" id="results"> 
    <img src="img/myimg.png"> 
</div>

Это показывает полное изображение, и я даже не могу двигаться через него. Есть ли все-таки исправить это?

Заранее спасибо.

Без увеличения: http://i.imgur.com/UcQ1sks.png

Увеличенные: http://i.imgur.com/Swz62tW.png

источник

2014-05-20 Sergiodiaz53

Загрузите изображение напрямую, без какого-либо HTML. – Blazemonger

Ну, идея состоит в том, чтобы показать его с некоторыми другими вещами на экране, а не только с изображением. – Sergiodiaz53

Загрузите изображение прямо в iframe? Неясно, к чему вы хотите получить полный конечный результат. – Blazemonger

Если я понял вашу проблему, вам нужно поместить этот файл в качестве фона и использовать свойство background-size: 100%

источник

2014-05-20 14:36:25

Нет .. это не фоновое изображение. Просто и образ, который я хочу показать, и хочу дать возможность его масштабировать. Я написал свойство width для 100%, и теперь он автоматически настраивается на экран (я все еще не могу его увеличить). Проблема в том, что если я вхожу с моим ноутбуком, он также берет 100% экрана, а не только 685x900. – Sergiodiaz53

Вы пробовали обернуть изображение? '

' –

Это прекрасно работает с немного css! благодаря! – Sergiodiaz53

Есть два возможных решения.

Используйте img {max-width: 100%;} в стиле css. Это заставит изображения изменять размер в зависимости от размера контейнера. Но проблема здесь в мобильных устройствах. Они по-прежнему загружают большую картину, хотя они видят ее размер. Это часто является проблемой с точки зрения скорости для мобильных устройств. Кроме того, смотрите выставлению http://www.youtube.com/watch?v=DvIOex3BhD8
Используйте аддон: http://www.concrete5.org/marketplace/addons/picturefill-image/ С помощью него вы можете сделать различные изображения отображаются в разных разрешениях (для планшетов, телефонов экранов), так что вам не придется иметь дело только с автоматически измененные размеры.

Оба решения необходимы только тогда, когда у вас есть отзывчивый веб-сайт.

Изображения занимают пробелы, которые были предоставлены. Они возьмут всю ширину экрана, если их контейнеры возьмут его. И они возьмут половину экрана, если их контейнер охватывает только половину экрана.

источник

2014-05-20 15:26:29 QArea

Большое изображение в jQuery Mobile

ответ

Смежные вопросы