javascript - 如何用独立于高度的图像覆盖 div？

Question

(!) 这个问题可以被认为是重复的，但是，没有找到任何适合作为多达 10 个主题的解决方案的东西 - 我很抱歉，我正在尝试找到这个特定问题的解决方案情况;

让我解释一下问题，

我将在此处留下一张可能有助于您理解问题的图片:

我有一个全宽的 div，它的高度会随着页面高度的改变而改变。
此 div 包含覆盖它的全宽图像，因此您可以在以下屏幕截图中看到:

所以我试着让它全宽和全高，独立于 parent 的高度
(一旦它的高度取决于屏幕顶部和底部之间的距离，它就很容易受到变化的影响——所以只要我们改变屏幕的高度，引用的 div 也会改变 div 的高度)；

问题在这里产生:
当屏幕的宽度和高度之间的比例为 1:2 (width:height) 时，图像将根据页面宽度调整大小(这是 img 的最大值width) 将不足以填充高度，而不是像我希望的那样填充 div，正如您可以在以下屏幕截图中验证的那样:

(红色部分为图片的父div)

• 我将在 javascript/jquery/css 中寻找解决方案
• 不鼓励使用图像作为背景，它没有像我之前尝试的那样工作
• 任何提示或指示都将受到高度赞赏和赞扬；
• 如果您发现此主题令人反感或违反规则，请通知我，以便在我不想向这个精彩的社区发送垃圾邮件时删除此问题。。

提前致谢! (接受我对这个长问题的道歉)

致以最美好的祝愿，
弗拉基米尔

Answer 1

您要查找的属性是:

background-size: cover; (for background-image);
object-fit: cover;(对于常规图像)；

ps:object-fit图片的容器必须有overflow: hidden