在不同的android版本的图像渲染差异

我正试图用Sencha Touchbuild立一个图库。 我创build了一个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%或类似的东西。

这是一个比较Android模拟器。 在这里输入图像说明

这里发生了什么事?

Solutions Collecting From Web of "在不同的android版本的图像渲染差异"

您的CSS中的mosaicitem类将height属性设置为auto 。 这意味着你让浏览器重新渲染图像。 显然,你将在不同的浏览器上有不同的结果。 我不知道这两个浏览器是如何对你的设置做出反应的,但是它只能来自这个。

从Sencha的文档中获取有关Ext.Image height属性:

默认情况下,如果没有明确设置,这个组件的元素将只有它自己的自然尺寸。

所以我相信这条线是对你的重要标签施加的一个高度,并且覆盖了sencha的自动高度,这应该是图像的自然尺寸。

总之,尝试删除这一行。