diff --git a/demo/index.html b/demo/index.html
index 06c533c..c00493a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,7 +12,7 @@
   <head>
 
     <title>iron-image demo</title>
-    
+
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -89,6 +89,24 @@ <h3>
         </template>
       </demo-snippet>
 
+      <h3>
+        <code>sizing="contain|cover"</code> with <code>context-menu</code> allows
+        the image to still be right clicked as well as dragged.
+      </h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <style is="custom-style">
+            #example-sizing-contain {
+              width: 150px;
+              height: 150px;
+              background: #ddd;
+            }
+          </style>
+
+          <iron-image sizing="contain" context-menu id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
+        </template>
+      </demo-snippet>
+
       <h3>
         Use the <code>--iron-image-width</code> property to set the width of
         the image wrapped by the <code>iron-image</code>.
diff --git a/iron-image.html b/iron-image.html
index bf774d6..1fb5a06 100644
--- a/iron-image.html
+++ b/iron-image.html
@@ -43,6 +43,11 @@
     <iron-image style="width:400px; height:400px;" sizing="cover"
       src="http://lorempixel.com/600/400"></iron-image>
 
+  Will allow sized image be be right clicked and dragged:
+
+    <iron-image style="width:400px; height:400px;" sizing="cover"
+      context-menu src="http://lorempixel.com/600/400"></iron-image>
+
   Will show light-gray background until the image loads:
 
     <iron-image style="width:400px; height:400px; background-color: lightgray;"
@@ -98,6 +103,16 @@
         display: none;
       }
 
+      :host([context-menu][sizing]) #img {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
       #placeholder {
         @apply(--layout-fit);
 
@@ -118,7 +133,7 @@
       hidden$="[[_computeImgDivHidden(sizing)]]"
       aria-hidden$="[[_computeImgDivARIAHidden(alt)]]"
       aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
-    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]">
+    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing, contextMenu)]]">
     <div id="placeholder"
       hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
       class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
@@ -260,6 +275,16 @@
           type: Number,
           value: null
         },
+
+        /**
+         * Can the <img/> be right clicked or dragged when sizing is set.
+         */
+
+        contextMenu: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
       },
 
       observers: [
@@ -344,7 +369,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing;
+        return !!this.sizing && !this.contextMenu;
       },
 
       _widthChanged: function() {
