如何像背景大小的背景图像一样全屏拉伸图像：封面？

Question

如何使普通图像（无论是 img 还是 svg）的行为与背景图像完全一样？ 我的意思是，覆盖整个屏幕并被裁剪以从不显示边框？

只有 css，没有 javascript。

我试过这个，主要是从img表现得像背景img？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("./demo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
}
</style>

</head>

<body>
<div class="bg">
<img src="./demo.jpg" style="position:fixed; z-index:-5000; top: 50%; left: 50%; margin-left: -960px; margin-top: -540px" >

</div>

</body>

</html>

“demo.jpg”图像为 1920x1080。

它有点工作，但如果 window 变得太窄，顶部图片不会被“挤压”。

如果我将图像切换到 svg，它拒绝被“裁剪”，它总是“包含”。

任何想法？

Answer 1

您正在尝试在背景图像之上放置响应式图像吗？ 如果是这样，可以在演示 img 上尝试宽度 100% 高度自动。

Answer 2

使用object-fit:cover

 img { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; }

 <img src="https://picsum.photos/id/1069/1000/1000">