如何像背景大小的背景图像一样全屏拉伸图像：封面？ [复制]答案

【问题标题】：How stretching an image fullscreen like a background-image with background-size: cover? [duplicate]如何像背景大小的背景图像一样全屏拉伸图像：封面？ [复制]
【发布时间】：2022-02-03 05:31:32
【问题描述】：

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

只有“css”，没有“js”。

我试过这个，主要来自img behaving like a background 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。

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

所以我尝试了以下建议的方法：

<!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%; 
}

img {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<img src="./demo.jpg">

</div>

</body>

</html>

看起来它正在工作。

主要目的是为背景图片添加一个可点击的地图区域。但是由于是“背景图”，所以什么都不能点击。

地图在那个时候工作，目标达到了。

然而，我尝试使用 'svg' 的 'img' 方法，但 'a href' 并没有像预期的那样工作：

<!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%; 
}

img {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<img src="./demo.svg">

</div>

</body>

</html>

如果我直接复制'svg'，它会拒绝“裁剪”，它总是“包含”：

<!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%; 
}

svg {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<svg viewBox="0 0 1920 1080" >
<a href="https://www.google.fr/">
<rect x="351" y="797" fill="#777" opacity="100%" width="92" height="42">

</rect>

</a>

</svg>

</div>

</body>

</html>

有什么想法吗？

【问题讨论】：

@Djave 非常棒，很好的材料，非常感谢。但仍然没有找到合适的解决方案。

标签： html css background-image image-resizing

【解决方案1】：

使用object-fit:cover

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

&lt;img src="https://picsum.photos/id/1069/1000/1000"&gt;

【讨论】：

不错，正是我想要的。然而有两个问题： 1-如果我链接到“svg”而不是“jpg”，则里面的链接不可点击。 2-如果我直接放一个“svg”，它的大小调整不会像预期的那样。
@Kochise 你是什么意思里面的链接不可点击？您的示例都没有链接，并且您不能在图像中包含链接。
@Djave 是的，这是非常基本的，我尝试使用上一个示例中存在的“svg”，但在上一个示例中也使用“demo.svg”。
@Djave 终于搞定了wenuam.com