Stretched images in FlipView RRS feed

  • Question

  • Hi.

     I created a photo gallery using FlipView, but some images are stretched. FlipView is 800x480, and looks fine for horizontal photos, but vertical photos are distorted.

    Any idea? Tried several css solutions, but didn't work.


    Saturday, June 2, 2012 12:38 AM


  • Hi RaySC,

    I think you can accomplish this by displaying the image using the background-image CSS property in your FlipView template. You can then use the other background CSS properties to control how the image is displayed.

    Here's a short example.

    The path to the image in the data source uses the url() function so it will work with the background-image CSS property.

        var dataArray = [,
      { img: "url(/images/image_01.jpg)" },
      { img: "url(/images/image_02.jpg)" },
      { img: "url(/images/image_03.jpg)" },
      { img: "url(/images/image_04.jpg)" },
      { img: "url(/images/image_05.jpg)" }

    Here is the FlipView and the item template from default.html with the image path bound the background-image CSS property.

     <div id="flipViewTemplate" data-win-control="WinJS.Binding.Template">
      <div class="templateImage" data-win-bind="style.backgroundImage:img;"></div>
        <div id="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource:DataExample.itemList.dataSource, itemTemplate:select('#flipViewTemplate')}"></div>
    And here are the related style rules from default.css. background-size:contain; ensures the entire background image is displayed.

     #flipView {
      width: 800px;
      height: 480px;

     .templateImage {
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;

    I hope that helps. If you have further questions post up some examples of what you've tried.

    Tuesday, June 5, 2012 4:20 AM