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>
<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.
Thanks,
Joel
