Click event outside image when using object-fit on img

Question

I suppose it's not possible, but want to double check: If I have an image that is object-fit:contain; and then click outside the image (on the background) but still inside the img frame - is there a way to let the click event bypass the img, just like if I had clicked outside the img frame?

Like so? thanks!

document.querySelector('.behind').addEventListener('click', e=> {
  alert('this will never happen :(')
})

body {
  margin:0;
}
img {
  width:100vw;
  height:100vh;
  object-fit:contain;
 
}
.behind {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background-color:red;
  z-index:-1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="behind">
    
  </div>
  <div class="image">
        <img src="https://picsum.photos/600/600">
  </div>
  
</body>
</html>

Not it's impossible BUT we can find different ways to achieve what you want if you give us more details — Temani Afif, Jan 19 '21 at 13:17
Thanks, made a codepen: https://codepen.io/flapusmog/pen/BaLbZLj I personally can't think of any way to work around this other than do object-fit through js instead (ew). — joe_g, Jan 19 '21 at 22:34

score 0 · Answer 1 · answered Jan 19 '21 at 22:45

Do it differently without object-fit

document.querySelector('.behind').addEventListener('click', e => {
  alert('this will never happen :(')
})

body {
  margin: 0;
}

img {
  max-width:100%;
  max-height:100vh;
  display:block;
  margin:auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
}

.behind {
  width: 100%;
  height: 100vh;
  background-color: red;
  z-index: -1;
}

<div class="behind">

</div>
  <img src="https://picsum.photos/600/600">

Click event outside image when using object-fit on img

1 Answers1