如何在extjs4的视口区域中拟合图像

how i fit image in region of viewport extjs 4?

本文关键字：区域 拟合 图像 视口 extjs4      更新时间：2023-09-26

我在setStyle Ext.getCmp('designPanel').body.setStyle('background-image','url(test.jpg)');的区域（视口）中设置了图像，现在图像看起来像"平铺"，现在我想以原始大小或拉伸形式在中心进行。我该如何做到这一点。extjs 4

可能会在body上执行另一个setStyle（使用css属性）http://www.w3schools.com/css/css_background.asp

您不应该使用集合样式。您是否应该使用cls属性并定义具有背景图像的css类以及x和y重复的css属性？

Ext.create('Ext.panel.Panel', { //Ext.container.Container may be just as suitable
    id: 'designPanel',  //ids are almost never necessary 
    layout: 'fit',
    items: Ext.create('Ext.Img', {
        src: 'test.jpg'
    })
});

不需要Ext.Img，它可以很容易地使用带有css的组件来显示/居中图像。你用什么并不重要，真正的拉伸工作是由合身的布局完成的。

http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Fit

你可以这样做：

Ext.create('Ext.panel.Panel', {
id: 'designPanel',
bodyStyle: "background: url('test.jpg') no-repeat right top;",//you can us right, left
...

})；

相关文章：