Question

How to style background-image url height and width

I am using sencha-touch AND building a mobileApp,
I have a view with a image – Xtype

    var profilePicture = {
        xtype : 'image',
        style : 'margin-top:10px;',
        id : 'profilePhoto',
        src : 'resources/images/profile.png',
        height : '104px',
        width : '84px'
    };

I added this image in the panel
I dynamically set the image’s src in my controller with the value of json I get from the server,

src = localStorage.httpServerPrefix + profile.imageURI; // I get the image URL
Ext.getCmp(“profilePicture”).setSrc(src.);

When I see in the browser
I get like,

<div class="x-img" id="profilePhoto" style="margin-top: 10px; height: 104px !important; width: 84px !important; background-image: url(http://127.0.0.1:8080/Milna/user/mphoto/1?version=7); "></div>

Height and width of the div are set to 104px and 84px.
My image’s size is 1600px × 1200px, so that it does not fit into the above div.
Is it possible to style the background image url???
What can I do to style the image which is coming from the url?

Answer 1

Take a look at this Refactored scope. In this article thay have explained about the styling function.

you’re styling will be more consistent, and more importantly it will make you totally look good when you restyle an entire mobile app in minutes instead of days.

Style: ‘background: resources/images/profile.png; width: 45%’,