object-fit:contain on child 防止父事件触发

Question

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
}

#img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div id="parent">
  <img src="https://dummyimage.com/600x400/000/fff" id="img">
</div>

基本上，我想要实现的是一个弹出窗口，它覆盖整个 window 并且有一个居中的图像，可以拉伸到最大高度或宽度（取决于图像尺寸）并保留纵横比 ratio.The 完整图像应该仍然可见。当您单击剩余的可见父级蓝色背景时，父级和图像都应该消失。

父事件未触发。但是，如果我删除 CSS 代码，事件就会触发。这里发生了什么？

Answer 1

子项与父项重叠。子元素完全可用 space 并完全覆盖其父元素。因此父元素没有可用的可点击区域。

调整子元素的高宽就可以实现。

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  position:fixed;
  top: 0;
  left: 0;
  background-color: blue;
  display: flex;
    align-items: center;
    justify-content: center;
}

#img {
 overflow:hidden;
}

<div id="parent">
  <img src="https://dummyimage.com/400x400/000/fff" id="img">
</div>

Answer 2

HTML 中的图像是 replaced element

如果您在开发人员工具中检查 img，您可能会发现图像元素本身覆盖了所有父元素（通过 width: 100%; height: 100%;）。

图像在屏幕上的表示被 object-fit: contain; 改变了。但这不会改变图像元素本身的尺寸。你可以看到，如果我向图像元素添加黄色背景。这涵盖了所有的蓝色parent

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
}

#img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: yellow;
}

<div id="parent">
  <img src="https://dummyimage.com/600x400/000/fff" id="img">
</div>

您需要尝试一些不同的方法才能让您的代码按预期工作

编辑：更改了实现

图片大小为 500 x 500 的示例

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div id="parent">
  <img src="https://dummyimage.com/500x500/f0f/000" id="img">
</div>

图片大小为 1000 x 600 的示例

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div id="parent">
  <img src="https://dummyimage.com/1000x600/f0f/000" id="img">
</div>

图片大小为 600 x 1000 的示例

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

#parent {
  width: 100%;
  height: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  
}

#img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div id="parent">
  <img src="https://dummyimage.com/600x1000/f0f/000" id="img">
</div>

Answer 3

因为我找不到使用 CSS 的简单解决方案（考虑到问题并没有那么复杂），我决定使用 JavaScript 通过动态调整图像来快速修复尺码。

我在这里留下我的答案给任何需要这个的人。但我仍然希望有一个 CSS 解决方案。

let parent = document.getElementById("parent");
let img = document.getElementById("img");

parent.addEventListener("click", function() {
  parent.style.display = "none";
});

img.addEventListener("click", function(e) {
  e.stopPropagation();
})

function stretchImage(){
    let w = this.innerWidth;
    let h = this.innerHeight;

    if(w < h){
        img.style.width = "100%";
        img.style.height = "auto";
    }else{
        img.style.width = "auto";
        img.style.height = "100%";
    }
}

window.onresize = stretchImage;
window.onload = stretchImage;

#parent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div id="parent">
  <img src="https://dummyimage.com/400x400/000/fff" id="img">
</div>

该脚本使用 onload 和 onresize 根据 window 的宽度和高度动态更改图像大小。这样，我什至不需要知道图像的尺寸。

object-fit:contain on child 防止父事件触发

object-fit:contain on child prevents parent event from triggering

javascript

css

events

object-fit

编辑：更改了实现

图片大小为 500 x 500 的示例

图片大小为 1000 x 600 的示例

图片大小为 600 x 1000 的示例