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"> </div>/code
Create the following CSS-styles:code.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>$( ".image-box" ).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$( ".pers-view-image-box-html" ).css( "pers-view-image-box", "url(" + ../image/profile_pic_large.png + ")" ); /code
There should be:
code$( ".pers-view-image-box-html" ).css( "background-image", "url(../image/profile_pic_large.png)" ); /code
If you know the image name beforehand (do not load it dynamically) then you can directly add in styles:code.pers-view-image-box {
background: url(../image/profile_pic_large.png) no-repeat scroll center center transparent;
height: 100%;
width: 100%;
min-height: 200px;
min-width: 150px;
}/code