#1 2016-03-29 13:35:20

andynhoo
Member
Registered: 2016-03-25
Posts: 2

App not resize image

FluxBB bbcode test
FluxBB bbcode test

The image logo in resolution 2304px x 753px;
The image is getting flattened.
How to solve the problem?
How do I turn the back button? I made a splash screen so wanted to disable the back button.

Last edited by andynhoo (2016-03-29 13:40:05)

Offline

#2 2016-03-29 14:49:09

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: App not resize image

Hello andynhoo,

There is not a unique way to achieve this kind of "scale" issues. We can, for example, use the app's "Orientation" event, and the "[App.Orientation]" variable, in order to react when the "landscape" mode enter in action. We can then set another image's sizes using actions like "SetStyle".

We can also use something like above but also can use CSS media queries, the "[App.InnerWidth]" and "[App.InnerHeight]" variables with the "Resize" app's event, etc. Remember we can also use actions like "SetViewSize", "SetAppScaled", etc. Instead of resizing the image we can use other image, etc.

About the "back button", take a look at this forum's thread and also to the "ConfirmExit" application sample. If you have any further question, please, don't hesitate to post it here or open a new forum's thread if the topic is not related with this one.

Offline

#3 2016-03-29 17:32:34

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: App not resize image

Hello,

I forget to mention various app samples that can be useful here. For example, the "Scaled" app sample can be useful. And also the "Calculator" sample. Take a look at the "About" view of the "Calculator" sample in both "portrait" and "landscape" orientations:

w8GFhP0.png

pOu8BPn.png

In the above case we don't use any app's event nor action, but just certain CSS media query into the app's "Inline CSS" option:

@media all and (orientation: landscape)
{
  #Image1
  {
    width: 50%;
  }
}

The above CSS code is applied only when the orientation is "landscape", and, in this case put the about image at the 50%, reducing in that way the image is scaled and obtaining a better apparence (subject to opinion).

Offline

#4 2016-03-30 05:32:03

andynhoo
Member
Registered: 2016-03-25
Posts: 2

Re: App not resize image

David wrote:

Hello,

I forget to mention various app samples that can be useful here. For example, the "Scaled" app sample can be useful. And also the "Calculator" sample. Take a look at the "About" view of the "Calculator" sample in both "portrait" and "landscape" orientations:

http://i.imgur.com/w8GFhP0.png

http://i.imgur.com/pOu8BPn.png

In the above case we don't use any app's event nor action, but just certain CSS media query into the app's "Inline CSS" option:

@media all and (orientation: landscape)
{
  #Image1
  {
    width: 50%;
  }
}

The above CSS code is applied only when the orientation is "landscape", and, in this case put the about image at the 50%, reducing in that way the image is scaled and obtaining a better apparence (subject to opinion).

How can I center an image independent orientation?

Last edited by andynhoo (2016-03-30 05:37:06)

Offline

#5 2016-03-30 11:21:09

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: App not resize image

Hello,

Again, we can use certain App Builder actions or maybe a bit of CSS code. For this last case, we can center the image using these CSS rules:

@media all and (orientation: landscape)
{
  #Image1
  {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
}

gju5i8M.png

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.