Javascript 如何使图像尽可能大，保持原始纵横比，而不切割图像的各个部分？

主要问题在标题中，但以下是我为使其发挥作用而面临的问题：

我有一张图片，我正试图根据窗口的大小调整页面大小。我想保持图像的原始纵横比，可能更宽或更高。我找到了一种获得纵横比的方法，但是有没有一种方法可以根据屏幕上的其他项目计算出我必须在宽度和高度上留出多少空间

从那里我可以找出如何相应地调整大小

---

我不想基于窗口的大小，因为那里可能有其他项目。我也在使用ionic2/angular2，但我并不认为这在这个问题上起作用。

实现这一点的最简单方法，也是我自己常用的解决方案，是使用CSS属性。不需要JS，只需对HTML和CSS进行一些调整

基本上，您需要做的是去掉

元素，而是创建一个

。调整您的布局，使这个div具有适当的大小和位置，然后，通过CSS，给它一个合适的位置。你会得到这样的结果：

CSS:

HTML:

我为

#myImg

设置的CSS属性执行以下操作：

• 背景图像

  ：设置图像的路径

• background size:contain

  ：使用

  contain

  值，该值将图像缩放到最大大小，以便其宽度和高度都可以容纳在div中。这就是幕后发生的所有魔术

• 背景重复：无重复

  ：禁用背景图像的重复。如果未设置此选项，则图像将平铺，以便覆盖整个div，这是我们不希望看到的

• 背景位置：居中

  ：将图像定位在div的中心

---

实现这一点的最简单方法，也是我自己常用的解决方案，就是使用CSS属性。不需要JS，只需对HTML和CSS进行一些调整

基本上，您需要做的是去掉

元素，而是创建一个

。调整您的布局，使这个div具有适当的大小和位置，然后，通过CSS，给它一个合适的位置。你会得到这样的结果：

CSS:

HTML:

我为

#myImg

设置的CSS属性执行以下操作：

• 背景图像

  ：设置图像的路径

• background size:contain

  ：使用

  contain

  值，该值将图像缩放到最大大小，以便其宽度和高度都可以容纳在div中。这就是幕后发生的所有魔术

• 背景重复：无重复

  ：禁用背景图像的重复。如果未设置此选项，则图像将平铺，以便覆盖整个div，这是我们不希望看到的

• 背景位置：居中

  ：将图像定位在div的中心

---

向我们展示您的尝试。你想用css还是js来解决这个问题？将预期的输出添加为图像，这将有助于理解您的问题。A将有助于帮助。老实说，js或css都可以。我想我需要用javascript进行计算，并相应地设置css。我本打算将高度和宽度设置为100%，计算出它们有多大，然后根据它们进行计算，并相应地重置高度和宽度，但我觉得这比需要的复杂得多，我不确定一个示例会有什么帮助，这将只是一个空白页，上面有一个图像。向我们展示你的尝试。你想用css还是js来解决这个问题？将预期的输出添加为图像，这将有助于理解您的问题。A将有助于帮助。老实说，js或css都可以。我想我需要用javascript进行计算，并相应地设置css。我本打算将高度和宽度设置为100%，计算出它们有多大，然后根据它们进行计算，并相应地重置高度和宽度，但我觉得这比需要的复杂得多，我不确定一个示例会有什么帮助，这将只是一个空白页面，上面有一个图像。这将很好。唯一的问题是我需要它是一个图像，因为我使用的是cropperjs，它运行在一个img标签上。此外，我希望动态加载图像，而不是强制加载css中的任何内容。此外，我想我需要更多的向后兼容性。如果你使用的是Ionic和angular2，那么为什么你需要更多的向后兼容性呢？无论如何，如果您从cropperjs获得一个img标记，您仍然可以创建一个包含除背景图像之外的所有属性的类，并将背景图像动态内联设置（从img标记上的src属性获取它并隐藏img标记）。它会像一个魔咒一样工作。我们把它当作一个网络应用而不是一个移动应用。Cropperjs在实例化时收到一个图像标记，而不是创建一个。我也在图像加载时实例化它，如果我将它设置为背景图像，我认为我做不到。此外，cropperjs的大小基于父div而不是图像div，这使得使用它更加复杂。这将很好。唯一的问题是，我需要它是一个图像，因为我使用的是cropperjs，它在img标记上运行。此外，我希望动态加载图像，而不是强制加载css中的任何内容。此外，我想我需要更多的向后兼容性。如果你使用的是Ionic和angular2，那么为什么你需要更多的向后兼容性呢？无论如何，如果您从cropperjs获得一个img标记，您仍然可以创建一个包含除背景图像之外的所有属性的类，并在I中动态设置背景图像

#myImg {
    background-image: url("../resources/img/myPic.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="myImg">
</div>