There are two images on my page, one is cover (.big-cover) and the other one is a card. When I add the card, cover image shrinks. I couldn't figure out why.

var app = angular.module('StarterApp', ['ngMaterial']); app.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog) {} ]) .controller('DialogController', function($scope, $mdDialog) {}); md-toolbar p { font-size: 1.250em; font-weight: 200; margin: auto; } md-toolbar { min-height: 30px; } .a133 { background: blue; } .a666 { background: red; } .big-cover { background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-277559.jpg) center center; background-repeat: no-repeat; background-position: center; height: 45vh; } .change-cover { text-transform: capitalize; } <link href="http://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script> <html lang="en" ng-app="StarterApp"> <body layout="column" ng-controller="AppCtrl"> <md-toolbar layout="row"> <p>NAVBAR</p> </md-toolbar> <div layout="column" class="big-cover"> <div layout="column" layout-align="space-between start"> <md-button class="md-raised md-primary change-cover">Change</md-button> <div>two</div> <div>three</div> </div> <div layout="column" layout-align="space-between end"> <div>one</div> <div>two</div> <div>three</div> </div> </div> <div layout="column"> <div layout="row" layout-align="center center"> <div flex="80"> <div layout="row" layout-wrap> <div flex="33" flex-sm="66" class="a133">[flex=33]</div> <div flex="66" flex-sm="66" class="a666">[flex=66]</div> <div flex="66"> <md-card> <img ng-src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-277559.jpg" class="md-card-image" alt="Washed Out"> <md-card-title> <md-card-title-text> <span class="md-headline">Card header</span> </md-card-title-text> </md-card-title> </md-card> </div> <div flex="33">[flex=33]</div> <div flex="33">[flex=33]</div> <div flex="33">[flex=33]</div> <div flex="33">[flex=33]</div> </div> </div> </div> </div> </body> </html>

Here's my fiddle : http://jsfiddle.net/tmrd/9sehsndk/