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

4 posts, 0 answers
  1. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 14 Dec 2012 Link to this post

    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?
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 18 Dec 2012 Link to this post

    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?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Dec 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready