如何使div宽度适应内部图像的宽度：自动？

Question

我正在使用Bootstrap-Vue模态来显示图像，并且希望图像长度不超过80％的视口高度（并且图像的宽度按比例缩放）。问题在于，尽管.modal-dialog上有width: auto，但.modal-dialog的宽度并不总是与图像的宽度匹配。

当图像较小时（如代码段中），但在较大的屏幕上图像溢出modal-dialog（可以在代码笔https://codepen.io/anon/pen/MMBKYP处重现）时起作用。

img {
  max-height: 80vh;
  width: auto;
}

.modal {
  box-sizing: border-box;
  display: block;
  height: 100%;
  left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  text-align: left;
  top: 0px;
  width: 100%;
}

.modal-dialog {
  border: 3px solid red;
  box-sizing: border-box;
  display: inline-block;

  margin: 0 auto;
  position: relative;
  text-align: left;
  width: auto;
}

<div class="modal">
  <div class="modal-dialog modal-md">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Wac_nearside_3000.jpg" alt="">
  </div>
</div>

如何使.modal-dialog的宽度始终适合图像的宽度？