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

Question

我在这里看过很多类似问题的帖子，似乎回答得很好。但是我的问题是我无法理解最新的逻辑，因此我发现代码看起来毫无意义。另外，我真的希望能够理解我正在编写的代码。所以我真的不需要任何完整的代码，因为我认为我可以从其他帖子中获得，但如果可能，有人可以向我解释代码背后的理论。

所以，如果我有500px宽和400px高的div然后两张照片：

1. 照片1：1000px宽800px高
2. 照片2：250px宽700px高

如何调整这些图像的大小以适应div内部而不会使它们变得拉伸或扭曲。

像我刚才所说的那样，我不是在寻找代码。有人可以完美地解释适合div内部照片的公式。

Answer 1

（简单）asnwer是浏览器知道图像的宽高比。

如果您只使用<img>标签，图片将以原始尺寸（和宽高比）显示。

现在，如果您指定宽度而不是高度，则会保留纵横比，因此您的图像不会失真。

如果你使用像max-width和/或max-height这样的CSS属性，那么你的浏览器会拍摄图像，如有必要，可以使用相同的高度和高度来缩放与您的规格相符的因素。

这会回答你的问题吗？

Answer 2

浏览器知道您的图像宽高比。如果您希望将250px宽的图像放入500px宽的容器中，则需要对其进行缩放并降低质量或保持原样。

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

当您的容器相同时，使用对象匹配可能会有所帮助，但图像的比例变化很大，如https://css-tricks.com/almanac/properties/o/object-fit/所示

或者将图像设置为背景图片的背景图片：封面。