Welcome, Guest
Username Password: Remember me

Image scaling on menu items etc.
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Image scaling on menu items etc.

Image scaling on menu items etc. 12 years, 3 months ago #6590

  • dyvel
  • OFFLINE
  • Fresh Boarder
  • Posts: 6
  • Karma: 0
Hi

I have a small issue with the image scaling on my menu items. The problem is that I need the image to have 100% width of the menu button. And that doesn't work when I view the site in "wide format" on my iPhone (horizontally). 

In fact I would like to use a large image that would cover the button in wide format, and then hide some of the image in normal vertical display (narrow / normal format), but can't seem to get that working. 

I'm pretty sure this border case is not supported by Mobile Joomla, but would it be possible to do?
Even just to turn off image scaling for menu items, and keep it for regular content?

Thanks
Daniel

Re: Image scaling on menu items etc. 12 years, 3 months ago #6591

  • dryabov
  • OFFLINE
  • Administrator
  • Denis Ryabov, Lead Developer
  • Posts: 4866
  • Karma: 105
You can try to apply css style like
yourselector img {
min-width: 100%;
height: auto;
}


Actually, in this case images will be blurred in lanscape mode because of rescaling.
Last Edit: 12 years, 3 months ago by dryabov.

Re: Image scaling on menu items etc. 12 years, 3 months ago #6592

  • dyvel
  • OFFLINE
  • Fresh Boarder
  • Posts: 6
  • Karma: 0
Hi

Thank your for your fast reply, but I don't think that will do it. 
Looking at the source code, the menu image is scaled and added width attributes to it. 

<img width="300" height="54" src="/images/knapper/Resized/knap_fisherman_300x54.png">


The original image I'm testing with is currently 879px wide
Last Edit: 12 years, 3 months ago by dyvel.

Re: Image scaling on menu items etc. 12 years, 3 months ago #6593

  • dryabov
  • OFFLINE
  • Administrator
  • Denis Ryabov, Lead Developer
  • Posts: 4866
  • Karma: 105
Yes, but then we stretch image to have ~450px width (and autorescale height).

Unfortunately, currently we haven't implemented a way to process such a situations (moreover, server doesn't know orientation of your device to rescale images correspondingly).

Re: Image scaling on menu items etc. 12 years, 3 months ago #6594

  • dyvel
  • OFFLINE
  • Fresh Boarder
  • Posts: 6
  • Karma: 0
In the theme css file that I'm modifying I found this:

body.landscape .toolbar>h1

So I'm guessing here, that jqtouch support a way to detect landscape mode, but it's not implemented in mobilejoomla. 
A stretched 300px scaled image to 100% in landscape on my iPhone looks pretty bad - very pixelated. It's a solution, but far from perfect.

Re: Image scaling on menu items etc. 12 years ago #8108

  • alirm41
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
  • Karma: 0
Hi. 
Would you please let me know if anyone solved this problem?
I have the same problem with my image size when I changing the mobile orientation from horizontal to vertical.

Or at least, is there any way to lock the orientation?
Can you tell me how you re sized menu items (coding line)?
Regards,
Al
Last Edit: 12 years ago by alirm41.

Re: Image scaling on menu items etc. 12 years ago #8116

  • alirm41
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
  • Karma: 0
Well, I spent more than two days to find the best, easiest and right solution on mobile orientation issue.
Here is the answer:
- Go to FTP and locate the mobile_iphone template folder.
- Download index.php into your local system
- Remove line 32: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-Insert :<meta name="viewport" content="user-scalable=no,width=device-width" /> instead of the previous meta tag.

Then you are done. when you rotate your mobile to landscape mode then you have full size image and text align to center on landscape mode.

Note: remember to set Adaptation mode from iphone backend setting to "Don't re scale" and your image width size should be 320px .

Regards,
Al
Last Edit: 12 years ago by alirm41.
  • Page:
  • 1
Time to create page: 0.15 seconds

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.

I accept cookies from this site.