css - 在 img 上使用 object-fit 时单击图像外的事件

Question

我想这是不可能的，但想仔细检查一下：如果我有一个适合对象的图像：包含；然后单击图像外部（在背景上）但仍在 img 框架内 - 有没有办法让 click 事件绕过 img，就像我在 img 框架外单击一样？

像这样？谢谢！

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>

score 0 · Accepted Answer

做不同的事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">

css - 在 img 上使用 object-fit 时单击图像外的事件

1 回答 1

Related

Reference