不同安卓版本的图像渲染差异

Question

我正在尝试使用 Sencha Touch 构建一个图片库。 我创建了一个容器对象，其 hbox 布局和宽度等于 window.innerWidth。然后，我在里面添加了三个容器。每个使用 vbox 布局，宽度等于 window.innerWidth / 3。

我在其中添加宽​​度等于在 CSS 上设置为“自动”的列宽和高度的图像。

这是我的代码：

Ext.define('Oasis.view.ImgTest',{
extend: 'Ext.Container',
xtype:'mosaic',
config:{
    cls: 'gallery',
    layout: {
        type: 'hbox', // This is a column-based mosaic
        pack: 'center',
        align: 'start'
    },
    columnWidth: -1,//
    numCols: 3, // Number of columns
    lastColumnUsed: -1, // Last column where a image were added. -1 for none.
    autoInstanceColumns: false, // If true, instantiate each column on initialize method
    items:[],
    scrollable: {
        direction: 'vertical',
        directionLock : true
    }
},
initialize: function(){
    var me = this;

    me.setColumnWidth(window.innerWidth/me.getNumCols());

    Ext.Viewport.on('orientationchange', function(){
        // Updates columns widths on screen orientation changes
        me.setColumnWidth(window.innerWidth/me.getNumCols());
        for(var c = 0; c < me.getNumCols();c++){
            // Column
            var column = me.getAt(c);
            for(var i = 0; i < column.getItems().getCount();i++){
                // Items per column
                var element = column.getAt(i);
                element.setWidth(me.getColumnWidth());
            }
        }
    }, this, {buffer: 50 });

    // Creates all columns and add to the mosaic
    if(me.getAutoInstanceColumns())
        for(var i = 0; i < me.getNumCols();i++){
            me.add({
                xtype:'container',
                id: 'col-'+i,
                cls: 'gallery',
                layout: 'vbox',
                flex:1
            });
        }


    // Add images
    me.insert(Ext.create('Ext.Img',{
            src:'resources/images/0228_FEA_Pet_dog_WCGHS_cutt.jpg',
            cls: 'mosaicitem',
            mode: 'element'
        }));me.insert(Ext.create('Ext.Img',{
            src:'resources/images/027c076a1c-1152x864.jpg',
            cls: 'mosaicitem',
            mode: 'element'
        }));me.insert(Ext.create('Ext.Img',{
            src:'resources/images/0913_LIF_PET_DOG_CUTTY_WCG.jpg',
            cls: 'mosaicitem',
            mode: 'element'
        }));
},
__get_next_column_index: function(){
    var me = this;
    var column = 0;

    // If some column was used in the last iteraction (if there was one),
    // calculates the next column that should be used. Else, use column 0.
    if(me.getLastColumnUsed() >= 0){
        column = (me.getLastColumnUsed() + 1) % me.getNumCols();
    }


    return column
},
insert: function(element){
    var me = this;

    // Se as colunas não forem instanciadas logo na initialização da classe, instancia uma a uma até que todas estejam instanciadas.
    if(!me.getAutoInstanceColumns() && me.getItems().getCount() < me.getNumCols()){
        var column = me.getItems().getCount();
        target_column = me.add({
                xtype:'container',
                id: 'col-'+column,
                cls: 'column',
                flex:1
            });
    }else{
        var column = me.__get_next_column_index();
        var target_column = me.getAt(column);
    }   

    // Set element width
    element.setWidth(me.getColumnWidth());
    target_column.add(element);
    me.setLastColumnUsed(column);
},

})

这是我的 CSS：

.gallery {
line-height: 0;
-webkit-column-gap: 0px;
margin: 2px 2px 2px 2px;
height: 100%;
}
.mosaicitem {
height:auto !important; 
border: 2px solid rgba(0,0,0,0.4);
border-radius: 5px;
padding: 2px;
background: rgba(0,0,0,0.5);
position: relative;
-webkit-animation: fadein 1s, translateZ 0.6s; /* Safari and Chrome */
-webkit-animation-delay: 0s, 0s;
   -moz-animation: fadein 1s, translateZ 0.6s; /* Firefox */
   -moz-animation-delay: 0s, 0s;
    -ms-animation: fadein 1s, translateZ 0.6s; /* Internet Explorer */
    -ms-animation-delay: 0s, 0s;
     -o-animation: fadein 1s, translateZ 0.6s; /* Opera */
     -o-animation-delay: 0s, 0s;
        animation: fadein 1s, translateZ 0.6s;
        animation-delay: 0s, 0s;
}

/* Animations */
@keyframes fadein {
from { opacity: 0 ; }
to   { opacity: 1 ; }
}
@keyframes translateZ {
from { top : 100px ; }
to   { top: 0px ; }
}

/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0 ; }
to   { opacity: 1 ; }
}
@-moz-keyframes translateZ {
from { top : 100px ; }
to   { top: 0px ; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0 ; }
to   { opacity: 1 ; }
}

@-webkit-keyframes translateZ {
from { top : 100px ; }
to   { top: 0px ; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0 ; }
to   { opacity: 1 ; }
}​
@-ms-keyframes translateZ {
from { top : 100px ; }
to   { top: 0px ; }
}

/* Opera */
@-o-keyframes fadein {
from { opacity: 0 ; }
to   { opacity: 1 ; }
}​
@-o-keyframes translateZ {
from { top : 100px ; }
to   { top: 0px ; }
}

在运行 android 4.4.2 的设备上它可以完美运行。但是，在 android 4.2.2 上，它看起来好像高度设置为 100% 或类似的东西。

这是在安卓模拟器上的比较。

这里发生了什么？

Answer 1

CSS 中的mosaicitem 类将height 属性设置为auto。这意味着您让浏览器调整图像大小。显然，您在不同的浏览器上会有不同的结果。我不知道这两个浏览器对你的设置有什么反应，但它只能来自这个。

取自 Sencha 的关于 Ext.Image height 属性的文档：

默认情况下，如果没有显式设置，这个组件的元素 只会有自己的自然大小。

所以我相信这条线是用你的 !important 标签强加一个高度，并覆盖 sencha 的自动高度，它应该是图像的自然大小。

简而言之，尝试删除此行。