angular empty fiddle

http://angularjs.org/

by gion_13

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-controller="myCtrl">
    Select the image stretching mode: <select 
       ng-model="selectedItem" 
       ng-options="o.label for o in selectables">
    </select>
    <p>The image will <b> {{selectedItem.label}} </b> the container</p>
    <br><br>
    Select the image: <select 
       ng-model="selectedImage" 
       ng-options="o.label for o in images">
    </select>
    <p>The image will <b> {{selectedItem.label}} </b> the container</p>
    <br><br>
        
        
    <div id="wrap" style="background-size:{{selectedItem.value}}; background-image: url({{selectedImage.value}})"></div>
    <br/>
    original image: <img ng-src="{{selectedImage.value}}" alt="" />
</div>

CSS

#wrap{
    width: 80%;
    height: 400px;
    border: 3px dashed red;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
}

JavaScript

angular
.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'stretch', value: '100% 100%'},
        { label:'cover', value: 'cover'},
        { label: 'contain', value: 'contain'}
    ];
    
    
    $scope.images = [
        { label: 'portrait', value: 'http://lorempixel.com/200/400/sports/1'},
        { label:'landscape', value: 'http://lorempixel.com/400/200/sports/2'},
        { label: 'square', value: 'http://lorempixel.com/300/300/sports/3'}
    ];

    // this is the model that's used for the data binding in the select directive
    // the default selected item
    $scope.selectedItem = $scope.selectables[0];
    
    $scope.selectedImage = $scope.images[0];
})