Html 加载图像后，如何缩放/调整图像大小？

背景：

我正在创建一个显示50%缩放图像的图像旋转木马，但当单击图像时，弹出式查看器会显示该图像的实际大小版本，前提是该图像不大于查看器

当图像小于弹出式查看器时，它将按实际大小显示

当图像大于弹出式查看器时，将缩放图像以适合查看器，但不会进行剪裁

弹出式查看器限制图像的整体大小，以便在放大或缩小图像时，图像周围的控件不会受到图像的干扰，这是我要添加到弹出式查看器的下一个功能。 这里有一小段代码，但全部都在CodePen中

<style>
  /* These aren't the actual values, they are dynamically calculated to fit
     the browser's viewport to prevent the image area from growing so large
     that it doesn't fit completely on the screen when the original image is
     either initially too large or the <img> width value is set by the user
     that causes the image to grow too large that one or both of the parent
     div's scrollbars 'switch-on'. */
  div > img {
    width: 1000px;
    height: 800px;
  }
</style>
<div style="overflow: auto;">
  <img style="object-fit: contain; width: 100%;" src="">
</div>

/*这些不是实际值，它们是动态计算的，以适应
浏览器的视口，以防止图像区域变大
当原始图像显示时，它不能完全显示在屏幕上
要么最初太大，要么

目标：

放大或缩小时，弹出式查看器的图像区域大小不会改变，而该区域内的图像会随着图像的放大或缩小而增大或缩小

部分解决方案：

下面是转盘和查看器的代码。旋转木马工作，单击其中一个图像会在弹出式查看器中显示它

这个版本结合了Stefan F.和LakshmiS关于如何将图像融入图像区域的解决方案

另一个版本在图像大于查看器的图像区域时支持缩放和滚动，但是，使用水平和垂直滚动条在图像区域中移动图像有点笨拙。是否有办法在图像区域内单击并拖动图像，作为滚动条的替代方法？

您可以将“对象适合：包含”添加到图像的css中

div#myModal > div.modal-content > div.mySlide > img {
   width: 100%;
   object-fit: contain;
}

---

我同意这个答案。是对象适合：包含将适合您的要求。谢谢。这是否会使img元素适合整个父元素的宽度，然后使图像大小适合img元素，但保持图像实际高宽比？当前版本的IE、Edge和现代浏览器是否完全支持此功能？简言之，是的，object fit:contain将使父容器中的图像适合。如果父容器非常不同，它将不会被扭曲，而是被剪切。除了ie之外，你可以在css中直接使用它。但是对于ie来说，如果你真的需要维护它，有一个polyfill库。感谢对象匹配：包含解决方案和信息。您有关于如何在缩放图像中进行缩放和滚动的信息吗？