css - codepen 是否解决响应性问题？

Question

我一直在努力让我的图像适合它们的父元素。为了问一个更好的 StackOverflow 问题，我决定制作一个 codepen，但是当我这样做时，问题就解决了吗？但是，当我运行本地服务器时，它仍然没有解决。谁能解释一下？

外层：

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

http://codepen.io/evejweinberg/pen/vgRNWR