下面是我的代码:
.background{
margin: 0;
padding: 0;
width:100%;
height:100%;
position: absolute;
background: url('https://dummyimage.com/600x400/000/fff') no-repeat center bottom / cover;
}
#subimage{
background: url("https://dummyimage.com/600x400/000/fff") no-repeat bottom / cover;
position: absolute;
left: 24.5%;
top: 28.3%;
width:??
height: ??
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="background">
<div id="subimage">
</div>
</div>
</header>
</body>我不知道图像的大小，所以我不知道 block 的大小(如果可能的话，我可以使用 img 标签，但 block 更适合我的任务)。 需要像封面一样获取“原生”图像大小，但不知道 block 的宽度和高度；
最佳答案
也许这对你有帮助。 我使用背景作为基础，没有给它任何高度，但是用 padding-bottom 做了。然后巧妙地将子图像放在它上面，是的，它在所有屏幕上都是响应式的
.background{
margin: 0;
padding: 0;
width: 100%;
padding-bottom: 85%;
position: relative;
background: url(https://i.ibb.co/bX8rPqr/mac-computer-screen-png-apple-mac-computer-screen-png-1122.png) no-repeat center bottom / cover;
background-size: contain;
}
#subimage{
background: url(https://dummyimage.com/600x400/000/fff) no-repeat bottom / cover;
position: absolute;
background-size: cover;
z-index: 12;
width: 92%;
height: 61.9%;
left: 4.1%;
bottom: 28.6%;
} <header>
<div class="background">
<div id="subimage">
</div>
</div>
</header>关于html - "Cover"图像不知道 block 的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57854115/