Question

我的页面上有两个图像，一个是封面（.big-cover），另一个是卡片。当我添加卡时，封面图像缩小。我无法弄清楚原因。

＆＃13;

var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdDialog',
    function($scope, $mdDialog) {}
  ])
  .controller('DialogController', function($scope, $mdDialog) {});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是我的小提琴：http://jsfiddle.net/tmrd/9sehsndk/

Angular Material div背景图像缩小

0 个答案: