Photo gallery (splitview) width 100% that doesn't stretch photos when rotate the phone!

[Cristiano]

Hi,
see here: www.iperbooking.net/mobilekendo/iperbooking
In the header section of my site I'd like to show a scrollview with some photos. The default css code in the splitview's documentation is set to: width 320px and height 220px. I tried to change to width 100% and leave height 220px but when I rotate my phone obviously the photos will stretch.
Is it possible to change the height of the gallery on the rotation event?

[Kamen Bundev]

Hi Cristiano,

The code in the example is meant to stretch. This behavior can be overridden by changing this rule:
#galleriaHome .photo {
    ...
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    ...
}
to
#galleriaHome .photo {
    ...
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    ...
}
which will stretch the photos only vertically and keep the aspect ratio intact.

Kind regards,
Kamen Bundev
the Telerik team

[Cristiano]

Hi Kamen,
I tried your css rule, but the images don't fit the width of 100% that I'd like to keep.
Now I have:
#galleriaHome .photo {
    width: 100%;
    margin: 0;
    height: 220px;
    display: inline-block;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
The height is always kept to 220px height and the width isn't 100%.
I think I bad explained what I'd like to build:
a gallery variable in height (for different rotation case) and 100% width (of the device), cropping the image where the aspect doesn't fit, is it possible?

[Kamen Bundev]

Hi Cristiano,

Unfortunately not automatically with only CSS. However, you can subscribe to onorientationchange and change the ScrollView height manually. To resize the images to 100% width and auto crop their height, you will need to set -webkit-background-size: 100% auto; and if you want to center the crop, also background-position: 50% 50%;

Let me know if this helps.

All the best,
Kamen Bundev
the Telerik team