100% width or height: change with browsers aspect ratio to cover whole window

info@totzek.de · June 7, 2012 at 10:56 AM

hi everybody,

perhaps you know that thing: you want to show a picture, or a movie in 100% of browsersize.
so you use for example 100% of width and set the height to be prop. but now, when the user changes the browsers aspect ratio, areas will appear on the top and on the bottom which are not covered by the plugin. - this doesnt look nice.

i wonder if the scaling could be dynamic?

dynamic in a way that the plugin would be always covering the whole browser? To achieve that the 100% setting must move from width to height for example, depending on the browsers aspect ratio. - can we do that?

best,
jan

Nupsi · June 7, 2012 at 2:25 PM

A short routine from Klaus he posted lately should do this trick if you change it to your needs >> TOPIC

Best regards
Nupsi

info@totzek.de · June 8, 2012 at 4:51 PM

thanks nupsi!
i tried that, but it distorts my plugin, so i removed that code again.

i want to show a video. it must be always covering the full browsersize, without distorting the video or without showing whitespace. you sometimes can see this on websites with images as a background. (example:
http://srobbin.com/jquery-plugins/backstretch/ )

I feel, that this is possible using krpano, but i cant find a way.
- best, Jan

info@totzek.de · July 6, 2012 at 6:50 PM

Any ideas...?

klaus.krpano · July 9, 2012 at 12:48 PM

Hi,

here:

Code

<plugin name="bg" url="..." align="center" enabled="false" onloaded="bg_automatic_scale()" />
		
<events name="bg_scale" onresize="bg_automatic_scale();" />
		
<action name="bg_automatic_scale">
  if(plugin[bg].loaded,
    div(screenaspect, stagewidth, stageheight);
    div(imageaspect, plugin[bg].imagewidth, plugin[bg].imageheight);
    if(imageaspect GT screenaspect, 
      set(plugin[bg].width,prop); set(plugin[bg].height,100%);
     ,
      set(plugin[bg].width,100%); set(plugin[bg].height,prop);
    );
  );
</action>

Display More

best regards,
Klaus

info@totzek.de · July 9, 2012 at 1:09 PM

Hi Klaus!

- Thanks for the perfectly working code, once again!
I should think about creating a shortcode to create "Thank-Klaus-Messages"...

No, honestly: Thanks for that help!
- Jan

100% width or height: change with browsers aspect ratio to cover whole window

Participate now!

Users Viewing This Thread