Javascript 重新调整div中任何图像的大小

我在这里看到了很多类似问题的帖子，它们似乎都得到了很好的回答。然而，我的问题是我无法理解正在发生的事情的逻辑，因此我发现查看代码毫无意义。另外，我真的希望能够理解我正在编写的代码。所以我真的不支持任何完整的代码，因为我认为我可以从其他帖子中得到，但是如果可能的话，有人可以向我解释代码背后的理论

所以，如果我有一个500像素宽，400像素高的div，然后有两张照片：

照片1:1000px宽800px高 照片2:250px宽700px高 如何重新调整这些图像的大小，使其适合div内部，而不会拉伸或扭曲

---

就像我一开始说的，我不是在寻找代码。有人能解释一下完美匹配div内照片的公式吗。

简单的问题是浏览器知道图像的纵横比

如果只使用标记，图像将以原始大小和纵横比显示

现在，如果指定的是宽度，而不是高度，则将保留纵横比，这样图像就不会失真

如果您使用CSS属性，如max width和/或max height，则会发生类似的情况：您的浏览器会获取图像，如果需要，可以使用相同的因子缩放图像和高度，以匹配您的规格

---

这回答了你的问题吗？

浏览器知道你的图像纵横比。如果你想把一个250像素宽的图像放进一个500像素宽的容器中，你就需要对它进行缩放，降低质量，或者保持原样

将“宽度”设置为100%，将“高度”设置为“自动”，将缩放图像以适应其宽度，而不会确保您的高度与所需输出匹配。您可以根据高度对其进行缩放，但同样的问题也适用。当涉及到使图像响应时，这尤其困难

当您使用相同的容器时，使用对象拟合可能会有所帮助，但图像的比率差异很大，如图所示

---

或者将图像设置为背景图像，背景大小为：封面

在CSS中将照片宽度设置为100%——这将是一个好的开始。每个人都这么说，但这不是正确的答案。有些图像是横向的，有些是纵向的，所以这不起作用。为什么不将其设置为背景图像并使用封面？如果我的图像高度大于该宽度，并且我已将宽度设置为100%，那么如何保持该比例？这就是我的意思。人们使用的是一个公式，但我无法在他们的代码中完全理解。所以我希望有人能解释一下。但是这些css方法不是答案，但是谢谢你的支持help@troybeckett那么我似乎没有正确理解你的问题。也许你可以澄清一点？我最终自己解决了这个问题，基本上对任何感兴趣的人都是这样。要更改图像大小但保持纵横比正确，公式如下：