Css codepen解决了响应性问题吗？

我一直在努力使我的图像适应它们的父元素。为了问一个更好的StackOverflow问题，我决定做一个代码笔，但当我这么做时，问题就解决了？但是，当我运行本地服务器时，这个问题仍然没有解决。有人能解释一下吗

外分区：

.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;
}

---

你想要这样的东西吗？一个区别可能是CodePen使用标准模式，而你的独立HTML页面使用的是怪癖…@DanielD-你的版本有两个不理想的地方：1）图像被拉伸，2）图像超出了棕色画布的高度。