我正在努力让我的图像适合他们的父元素。为了问一个更好的StackOverflow问题，我决定使用一个codepen，但是当我这样做时，问题就解决了？但是，当我运行本地服务器时，它仍然没有解决。谁能解释一下呢？
外部div：
.img-holder{
opacity: .5;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
position: relative;
max-width: 80vw;
display: block;
max-height: 80vh;
}
内部图片：
img {
left: 50%;
transform: translateX(-50%);
position: relative;
max-height: 80vh;
}