This is a migrated thread and some comments may be shown as answers.

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

3 Answers 132 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Cristiano
Top achievements
Rank 1
Cristiano asked on 14 Dec 2012, 04:13 PM
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?

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 17 Dec 2012, 02:40 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cristiano
Top achievements
Rank 1
answered on 18 Dec 2012, 11:21 AM
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?
0
Kamen Bundev
Telerik team
answered on 19 Dec 2012, 04:16 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ScrollView (Mobile)
Asked by
Cristiano
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Cristiano
Top achievements
Rank 1
Share this question
or