Sencha touch 2.0 карусель, разрешение изображения

- Приложение использует карусель Sencha touch 2.0
- Изображения в карусели отображаются в полноэкранном режиме (без панели навигации в верхней части экрана)
- Приложение предназначено для iPad2, дисплея iPad2 Retina, Android xhdpi (планшеты)

Цель: отображать полноэкранные изображения в карусели на всех целевых устройствах.

Вопрос: Какое должно быть разрешение изображения? Я пробовал изображение 1028x768 в карусели. Отображает нормально (полный экран) на сетчатке iPad2, но на Samsung Galaxy Tab 10 я вижу вертикальные полосы по бокам. Я понимаю, что разрешение ниже, чем у сетчатки, но я подумал, что оно автоматически уменьшит масштаб до разрешения целевого устройства и отобразит изображение в полноэкранном режиме, но, видимо, этого не происходит.

Было ли это достигнуто, если да, поделитесь.

Ценить это.

Спасибо.


sencha-touch-2
person user1824359    schedule 14.11.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Понятно!

Разрешение изображения не имеет значения! Истинный. Важно убедиться, что тег изображения отображает полное изображение, автоматически изменяя его размер.

Вот как:
-Определить тег DIV с заданной высотой (window.innerHeight) и шириной (window.innerWidth).
-Поместить тег img в качестве дочернего элемента тега DIV с высотой = 100%. и width=100%

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

Полный код для работы карусели находится здесь:

Код карусели

{
    xtype: 'panel'
    layout: 'fit',
    flex: Ext.os.is.Phone ? 5 : 6,
    items: [
        {
            xtype: 'carousel',
            direction: 'horizontal',
            directionLock: true,
            id: 'ImgId',
            flex: Ext.os.is.Phone ? 5 : 6,
            config: {
                fullscreen: true
            }
        }
    ]
}

Код товара в карусели

Ext.each(images, function (picture) {
    var img = picture.url;
    var bigImg = picture.bigUrl;
    itemsoverlay.push({
        xtype: 'label',
        html: '<div style="width:' 
               + window.innerWidth 
               + 'px;height:' + 'px;"><img src=' 
               + imgURL 
               + ' style="width: 100%;height: 100%;" /></div>'
     });
});

Этот код работает для планшетов и смартфонов, iOS или Android.

ХТН

person user1824359    schedule 15.11.2012
comment
Если я установлю высоту/ширину изображения на 100%, оно растянет изображение. Мне нужно сохранить фактическое соотношение размеров изображения, так что в моем случае это не очень помогает :( - person Aajahid; 11.11.2013