Html模态显示图像没有拉伸

Question

我在html中使用modal来显示图像，类似于facebook在Messenger中的图像显示。我将大屏幕上的图像高度设置为90％，但如果图像很小，它会被拉伸。在移动屏幕上，将图像设置为占据屏幕宽度的100％并自动调整高度，但如果图像不是很宽，则会拉伸。我希望图像以其自然尺寸显示，但在计算机屏幕上不高于90％，在移动屏幕上不超过100％。我尝试了max-height和max-width，但它仍然拉伸了我的画面。

非常感谢帮助！

我有这个代码用于我的模态 HTML：

var modal = document.getElementById('imgmodal');
var img = document.getElementById('picture');
var modalImg = document.getElementById("img");
var download = document.getElementById('download-link');
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  download.href = this.src;
}
var span = document.getElementById("close");
span.onclick = function() {
  modal.style.display = "none";
}

/* exam_img */

#imgmodal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  overflow: auto;
  background-color: rgb(0, 0, 0);
  /* Black w/ opacity */
  transition: 0.3s;
}


/* Modal Content (image) */

.content {
  margin: auto;
  display: block;
  height: 90%;
}


/* Add Animation */

.content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}


/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 768px) {
  .content {
    /* I want image to be vertically centered on smaller screens)*/
    width: 100%;
    max-height: 90%;
    height: auto;
  }
  #close {
    top: 2px;
    font-size: 40px;
  }
  #imgmodal {
    padding-top: 50px;
  }
  #caption {
    top: -1px;
  }
}

<li class="exam_li">
  <img id="picture" src="https://gapanalysis.usgs.gov/padus/files/2011/07/MT_GlacierNP500px-200x200.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img">
</li>

<div id="imgmodal">
  <div id="caption">
    <a id="download-link" download>
      <span class="glyphicon glyphicon-download"></span>
      <a id="download-link" download></a>
  </div>
  <span id="close">&times;</span>
  <img class="content" id="img">
</div>