PDA

View Full Version : make image autofit on a panel



hrishikeshp19
22 Jun 2011, 2:27 PM
Hello everyone,

I am using background image on a panel through html property of the panel like this

App.somePanel= new Ext.Panel({
html:'http://somesite/someimage.png'
---
---});

I want to make that image autofit to the panel. How can it be done?

Thanks and Best Regards,

Hrishikesh Paranjape.

Martialen
11 Jul 2011, 8:45 AM
Hey, you could do this:

JS

App.somePanel= new Ext.Panel({
html:'<img class="expandedImg" src="http://somesite/someimage.png" />'
---
---});

CSS

.expandedImg { height: 100%; width: 100%; }

It may be better, however, to use the image as the background of the panel so that you can float other content in the panel too, on top of the image.

JS


App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>'
---
---});


CSS


.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}

hrishikeshp19
11 Jul 2011, 11:39 AM
Hey thanks a lot lot lot lot....

Can we zoom in/zoom out with sencha. Various sencha forums suggest that zoom in/out cant be done. Is there(can there be) a way to zoom in/out an image. Its like.. I am developing an image viewer. Image is coming from server. Image is of fixed resolution and I want to zoom in/out of the image just like a web browser.

Regards,

Hrishikesh P
SJSU

SunCoder
9 Aug 2011, 5:15 AM
:)