Forum | Appery.io

I have a photo that i want to keep its ratios when using different size devices so i wrote this css:

.panel-wide {
width: 100% !important;
height:100% !important;
}

On the web test it comes out good:

On my iPhone its totally messed up:

Is there a problem with how the ipa file was built or what else could be causing the iPhone to totally mess up the photo?

Hi John,

This is a layout problem.

If the image size in the interface can be set strictly, then insert a Panel there and specify its exact size in px or em. Then paste the following html-code into it:
code<div class="image-box"> <&#47;div>/code
Create the following CSS-styles:code&#46;image-box {
background: no-repeat scroll center center transparent;
height: 100%;
width: 100%;
min-height: 98px;
min-width: 130px;
}
After that, you can specify the address of the image:
<code>$( "&#46;image-box" )&#46;css( "background-image", "url(" + url_to_image + ")" );/code
Regardless of what dimensions or aspect ratio your panel has, the image on it will always be scaled to fit completely without the aspect ratio disrupting.

ok im a bit confused here. I put in the html in a panel. Then I created a new css file as:

.pers-view-image-box {
background: no-repeat scroll center center transparent;
height: 100%;
width: 100%;
min-height: 200px;
min-width: 150px;
}

code$( ".pers-view-image-box-html" ).css( "pers-view-image-box", "url(" + ../image/profile_pic_large.png + ")" );

/code

nothing shows up... is my image url wrong?

and do i need code in front of "$"? And is the last part of the code supposed to be written right after the 1st part in the same css file?:

code$( ".pers-view-image-box-html" ).css( "pers-view-image-box", "url(" + ../image/profile_pic_large.png + ")" ); /code/code

the other thing you have "background-image" in your code.... what is that supposed to represent?

Hi John,

code$( "&#46;pers-view-image-box-html" )&#46;css( "pers-view-image-box", "url(" + &#46;&#46;&#47;image&#47;profile_pic_large&#46;png + ")" ); /code
There should be:
code$( "&#46;pers-view-image-box-html" )&#46;css( "background-image", "url(&#46;&#46;&#47;image&#47;profile_pic_large&#46;png)" ); /code
If you know the image name beforehand (do not load it dynamically) then you can directly add in styles:code&#46;pers-view-image-box {
background: url(&#46;&#46;&#47;image&#47;profile_pic_large&#46;png) no-repeat scroll center center transparent;
height: 100%;
width: 100%;
min-height: 200px;
min-width: 150px;
}/code