Fix overflow of image elements. (#1811)

* Fix overflow of image elements.

* Positioning safeguards

src/panels/lovelace/elements/hui-image-element.js

@@ -14,10 +14,10 @@ class HuiImageElement extends ElementClickMixin(PolymerElement) {
       <style>
         :host(.clickable) {
           cursor: pointer;
+          overflow: hidden;
           -webkit-touch-callout: none !important;
         }
         hui-image {
-          overflow-y: hidden;
           -webkit-user-select: none !important;
         }
       </style>

src/panels/lovelace/mixins/element-click-mixin.js

@@ -21,13 +21,15 @@ export default dedupingMixin(
 
         let ripple = null;
         const rippleWrapper = document.createElement("div");
-        this.shadowRoot.appendChild(rippleWrapper);
+        this.parentElement.appendChild(rippleWrapper);
         Object.assign(rippleWrapper.style, {
-          position: "absolute",
+          position: this.style.position || "absolute",
           width: isTouch ? "100px" : "50px",
           height: isTouch ? "100px" : "50px",
-          top: "50%",
-          left: "50%",
+          top: this.style.top,
+          left: this.style.left,
+          bottom: this.style.bottom,
+          right: this.style.right,
           transform: "translate(-50%, -50%)",
           pointerEvents: "none",
         });