Add card image aspect ratio control

docs/src/pages/components/Card.vue

@@ -94,14 +94,23 @@
           </md-card-media>
 
           <md-card-actions>
-            <md-button>Action</md-button>
-            <md-button>Action</md-button>
+            <md-button class="md-icon-button">
+              <md-icon>favorite</md-icon>
+            </md-button>
+
+            <md-button class="md-icon-button">
+              <md-icon>bookmark</md-icon>
+            </md-button>
+
+            <md-button class="md-icon-button">
+              <md-icon>share</md-icon>
+            </md-button>
           </md-card-actions>
         </md-card>
 
         <md-card>
           <md-card-media-cover md-text-scrim>
-            <md-card-media>
+            <md-card-media md-ratio="16:9">
               <img src="assets/card-image-3.jpg" alt="People">
             </md-card-media>
 
@@ -139,35 +148,9 @@
           </md-card-media-cover>
         </md-card>
 
-        <md-card md-with-hover>
-          <md-card-area v-md-ink-ripple>
-            <md-card-header>
-              <md-avatar>
-                <img src="assets/avatar.png" alt="People">
-              </md-avatar>
-
-              <div class="md-title">Title goes here</div>
-              <div class="md-subhead">Subtitle here</div>
-            </md-card-header>
-
-            <md-card-media>
-              <img src="assets/card-image-1.jpg" alt="People">
-            </md-card-media>
-
-            <md-card-content>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
-            </md-card-content>
-          </md-card-area>
-
-          <md-card-actions>
-            <md-button>Action</md-button>
-            <md-button>Action</md-button>
-          </md-card-actions>
-        </md-card>
-
         <md-card class="card-example" v-md-theme="'blue'">
           <md-card-area md-inset>
-            <md-card-media>
+            <md-card-media md-ratio="16:9">
               <img src="assets/card-example.jpg" alt="Coffee House">
             </md-card-media>
 

src/components/mdCard/mdCard.scss

@@ -1,4 +1,5 @@
 @import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
 
 $card-radius: 2px;
 
@@ -25,6 +26,18 @@ $card-radius: 2px;
   .md-card-media {
     position: relative;
 
+    &.md-16-9 {
+      @include image-aspect-ratio(16, 9);
+    }
+
+    &.md-4-3 {
+      @include image-aspect-ratio(4, 3);
+    }
+
+    &.md-1-1 {
+      @include image-aspect-ratio(1, 1);
+    }
+
     + .md-card-header {
       padding-top: 24px;
     }
@@ -32,6 +45,10 @@ $card-radius: 2px;
     + .md-card-content:last-child {
       padding-bottom: 16px;
     }
+
+    img {
+      width: 100%;
+    }
   }
 
   .md-card-header {

src/components/mdCard/mdCard.theme

@@ -1,6 +1,12 @@
 .THEME_NAME {
   .md-card,
   &.md-card {
+    .md-icon-button {
+      .md-icon {
+        color: #{'BACKGROUND-CONTRAST-0.54'};
+      }
+    }
+
     > .md-card-area {
       &:not(.md-inset) {
         border-bottom-color: #{'BACKGROUND-CONTRAST-0.12'};

src/components/mdCard/mdCardMedia.vue

@@ -1,5 +1,22 @@
 <template>
-  <div class="md-card-media">
+  <div class="md-card-media" :class="classes">
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    props: {
+      mdRatio: String
+    },
+    computed: {
+      classes() {
+        return {
+          'md-16-9': this.mdRatio === '16:9' || this.mdRatio === '16/9',
+          'md-4-3': this.mdRatio === '4:3' || this.mdRatio === '4/3',
+          'md-1-1': this.mdRatio === '1:1' || this.mdRatio === '1/1'
+        };
+      }
+    }
+  };
+</script>

src/components/mdCard/mdCardMediaCover.vue

@@ -86,6 +86,10 @@
           let limit = 256;
           let darkness = Math.abs(limit - lightness) * 100 / limit;
 
+          if (darkness > 30) {
+            darkness = 30;
+          }
+
           if (this.mdTextScrim) {
             this.applyScrimColor((darkness + 35) / 100);
           } else if (this.mdSolid) {

src/core/stylesheets/mixins.scss

@@ -0,0 +1,18 @@
+@mixin image-aspect-ratio($width, $height) {
+  overflow: hidden;
+
+  &:before{
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+    display: block;
+    content: " ";
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    transform: translateY(-50%);
+  }
+}