Javascript 对象匹配：子对象上包含阻止父事件触发

let parent=document.getElementById（“parent”）；
设img=document.getElementById（“img”）；
addEventListener（“单击”，函数（）{
parent.style.display=“无”；
});
img.addEventListener（“单击”，函数（e）{
e、 停止传播（）；
})

#父级{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景颜色：蓝色；
}
#img{
宽度：100%；
身高：100%；
对象匹配：包含；
}

---

子项与父项重叠。子元素占用全部可用空间，并完全覆盖其父元素。因此父元素没有可单击的区域

如果调整子元素的高度和宽度，则可以实现这一点

let parent=document.getElementById（“parent”）；
设img=document.getElementById（“img”）；
addEventListener（“单击”，函数（）{
parent.style.display=“无”；
});
img.addEventListener（“单击”，函数（e）{
e、 停止传播（）；
})

#父级{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景颜色：蓝色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#img{
溢出：隐藏；
}

HTML中的图像是

如果您在开发人员工具中检查img，您可能会发现图像元素本身覆盖了所有父元素（即通过

宽度：100%；高度：100%；

）

通过

对象匹配：contain更改屏幕上图像的表示形式。但这不会改变图像元素本身的尺寸。您可以看到，如果我向图像元素添加黄色背景。这涵盖了所有蓝色的
父项


let parent=document.getElementById（“parent”）；
设img=document.getElementById（“img”）；
addEventListener（“单击”，函数（）{
parent.style.display=“无”；
});
img.addEventListener（“单击”，函数（e）{
e、 停止传播（）；
})
#父级{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景颜色：蓝色；
}
#img{
宽度：100%；
身高：100%；
对象匹配：包含；
背景：黄色；
}
由于我找不到使用CSS的简单解决方案（考虑到问题没有那么复杂），我决定使用JavaScript通过动态调整图像大小进行快速修复

我把我的答案留给需要的人。但我仍然希望这一个CSS解决方案


let parent=document.getElementById（“parent”）；
设img=document.getElementById（“img”）；
addEventListener（“单击”，函数（）{
parent.style.display=“无”；
});
img.addEventListener（“单击”，函数（e）{
e、 停止传播（）；
})
函数stretchImage（）{
设w=该宽度；
设h=该高度；
if（w
#父级{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景颜色：蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

但您的代码仅将图像居中。图像还应伸展到最大高度或宽度，同时保留纵横比，完整图像应仍然可见。图像的纵横比失真。@DeepureGhunah它不保留纵横比。@atan使用
溢出：隐藏
@atan更新解决方案，如果要保持图像的高度图像100%添加这个
#img{高度：100%；溢出：隐藏；}
现在我明白了。但不幸的是，图像仍然没有延伸。它仍然居中，但并没有占据整个窗口。您的代码片段之所以有效，是因为您使用的图像尺寸较大，而我使用的大多数图像大约为500x500。但+1用于解释对象拟合背后的原因。@atan您是正确的。我还没有找到一种方法来模拟
对象匹配
包含，而不使用
对象匹配
@atan我设法解决了图像尺寸的问题。看看我的editI，我试过了，但它仍然是相同的。你知道在运行时使用的图像的apect比率，可能会将这些数据添加到HTML输出吗？@yunzen nope。我在想也许有一个简单的CSS解决方案可以解决这个问题，但我想我会选择JavaScript，不需要额外的脚本。使用CSS。请参阅我的更新解决方案