JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//rawgit.com/ManifestWebDesign/angular-gridster/v0.10.4/dist/angular-gridster.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//rawgit.com/sdecima/javascript-detect-element-resize/master/jquery.resize.js"></script>
<script src="//rawgit.com/ManifestWebDesign/angular-gridster/v0.13.5/dist/angular-gridster.min.js"></script>
<div ng-app="someApp" ng-controller="someCtrl" style="background-color: red; width: 100%;">
<div class="container">
<div gridster="gridsterOpts">
<ul>
<li class="" gridster-item="block" ng-repeat="block in sorted_blocks">
<div class="panel panel-default" style="background-color: blue;">
<div class="panel-heading" style="background-color: green;">{{ block.title }}</div>
<div class="panel-content image-responsive" style="background-color: yellow;"
ng-style="{'background-image':'url(' + block.image + ')'}"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
CSS
body {
/*overflow: hidden;*/
}
.panel {
display: flex;
flex-flow: column nowrap;
height: 50%;
}
.panel .panel-content {
flex-grow: 1;
}
.image-responsive {
background-size: contain;
background-repeat: no-repeat;
}
JavaScript
angular.module('someApp', ['gridster']).controller('someCtrl', function ($scope, $http) {
$scope.gridsterOpts = {
resizable: {
enabled: false
},
columns: 10
};
$scope.sorted_blocks = [{
id: 1,
sizeX: 3,
sizeY: 3,
image: 'http://i.imgur.com/NI1Xm16.jpg',
title: 'название1',
row: 0,
col: 3
}, {
id: 2,
sizeX: 3,
sizeY: 3,
image: 'http://i.imgur.com/x6qmeUY.jpg',
title: 'название2',
row: 0,
col: 0
}];
});