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

Question

How to make a normal image (be it img or svg) behave exactly like a background-image?如何使普通图像（无论是 img 还是 svg）的行为与背景图像完全一样？ I mean, covering the whole screen and getting cropped to never display borders?我的意思是，覆盖整个屏幕并被裁剪以从不显示边框？

Only css, no javascript.只有 css，没有 javascript。

I tried this, mostly from img behaving like a background img?我试过这个，主要是从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>

The "demo.jpg" image is 1920x1080. “demo.jpg”图像为 1920x1080。

It works somewhat, but the top picture doesn't get "squeezed" if the window gets too narrow.它有点工作，但如果 window 变得太窄，顶部图片不会被“挤压”。

And if I switch the image to a svg, it refuses to get "cropped", it is always "contain".如果我将图像切换到 svg，它拒绝被“裁剪”，它总是“包含”。

Any idea?任何想法？

Answer 1

You are trying to have a responsive image on top of the background image?您正在尝试在背景图像之上放置响应式图像吗？ If so try width 100% height auto on the demo img maybe.如果是这样，可以在演示 img 上尝试宽度 100% 高度自动。

Answer 2

use object-fit:cover使用object-fit:cover

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

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

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

问题描述

2 个解决方案

解决方案1
0 2022-02-01 22:31:05

解决方案2
0 2022-02-01 22:45:15

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

问题描述

2 个解决方案

解决方案1 0 2022-02-01 22:31:05

解决方案2 0 2022-02-01 22:45:15

解决方案1
0 2022-02-01 22:31:05

解决方案2
0 2022-02-01 22:45:15