我想在我的 html 页面顶部放置一个图像，该图像粘在左上角位置（左：0，上：0）填充整个宽度，因此当窗口大小改变时它的高度也会改变。页面的其他内容必须放在图片下方。当窗口大小发生变化时，图像高度会发生变化，因此我不能对 html 页面的其余部分使用绝对顶部，并且包含图像的 div 的高度为零，因为其中包含绝对 img。我该如何解决这个问题？
<div style="">
<img style="position:absolute;left:0;top:0;width:100%;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
other contents of the webpage must be placed below the image.
【问题讨论】：
标签： css-position absolute
问题是：为什么你需要绝对位置？为什么不把图片放在内容的顶部，它会自己填充内容。
喜欢：
<img style="width:100%;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
other contents of the webpage must be placed below the image.
【讨论】：
您可以使用 jQuery 来实现。
var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
var innerHeight - $('body').innerHeight(); //height PX minus scrollbar
document.getElementById("idGivenToTheImgTag").style.height = innerHeight;
document.getElementById("idGivenToTheImgTag").style.width = innerWidth;
CSS 的实现方式：
body {
margin-top:0;
margin-right:0;
margin-left:0;
}
.yourimageclass {
width: 100vw;
}
注意：这会将图像设置为完整的视口宽度。 包含在其中的滚动条。
【讨论】：
如果我理解正确，这应该可以解决您的问题：
body {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.image-container {
width: 100%;
height: 100%;
overflow: hidden;
/* Required for extra to center the image */
position: relative;
}
.image-container img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* CSS3 extra to center the image */
-webkit-transform: translate(-50%, -50%); /* for Safari */
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}<html>
<head>
<title>Full-width image</title>
</head>
<body>
<div class="image-container">
<img src="http://lorempixel.com/1920/1080" />
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa lectus, varius vel semper ac, tristique scelerisque metus. Donec ac dui pretium, scelerisque arcu nec, gravida odio. Cras porta nibh ut aliquet posuere. Donec venenatis nulla pellentesque est vulputate accumsan. Suspendisse potenti. Sed ac scelerisque sapien, nec bibendum orci. Praesent ac iaculis lectus. Sed rhoncus, augue sed rutrum tempor, purus sapien tincidunt mi, ultrices faucibus nisi orci non lacus. Vestibulum malesuada, orci id pellentesque gravida, lectus purus tempor urna, a dapibus ipsum est vitae ex. Sed lacinia vehicula vestibulum. Aliquam placerat leo sit amet libero tincidunt, auctor ultricies tellus maximus. Nulla facilisi. Maecenas sit amet nisl eget risus consectetur placerat. Curabitur sodales ante quis augue luctus consectetur. Nunc accumsan fermentum augue, eu pellentesque justo aliquet quis. In ultricies lectus odio, eu aliquam enim pellentesque vel.
Etiam magna ipsum, blandit at faucibus id, condimentum consequat libero. Maecenas leo elit, ornare dapibus sollicitudin et, rhoncus ut velit. Duis euismod scelerisque mauris, sit amet congue diam bibendum at. Suspendisse dictum porta maximus. Etiam sit amet mauris nibh. Nam tempus mollis bibendum. Sed consequat, velit non tincidunt congue, erat velit finibus ligula, et aliquet neque nisl et mi. Nunc sodales ultrices odio, posuere cursus metus tempus faucibus.
Praesent imperdiet varius tempor. Aliquam pharetra auctor sapien, et placerat ipsum rutrum vel. Integer a blandit mauris. Phasellus a odio pretium, ullamcorper purus et, vehicula diam. Vestibulum placerat nunc id imperdiet cursus. Quisque sollicitudin, mi a sollicitudin consequat, sapien augue cursus urna, eget ultrices massa neque in massa. Praesent tempor diam ac lectus gravida, vel fringilla risus aliquet. Maecenas facilisis eros sed diam interdum vehicula a nec risus. Suspendisse potenti.
Proin a finibus nisi, eget ullamcorper elit. Nulla iaculis consectetur convallis. Nulla dignissim mauris egestas purus scelerisque, vel porta quam dignissim. Vestibulum fermentum cursus volutpat. Sed vel libero dui. Praesent consequat imperdiet purus vel sagittis. Vestibulum interdum arcu sit amet luctus bibendum. Quisque non odio luctus, vulputate augue at, imperdiet tellus. Aliquam iaculis massa turpis, vel rutrum tortor tincidunt non. Aliquam euismod magna lectus, ac aliquam nunc malesuada nec. Nulla dapibus euismod mi, imperdiet lobortis nisl egestas vestibulum. Etiam quam felis, euismod tincidunt mattis et, bibendum sed nunc. Quisque viverra sem leo, quis feugiat odio tristique vitae. Maecenas id tortor ac urna vulputate iaculis non ac nulla. Integer at arcu sed felis sodales faucibus a in libero.
Quisque ac malesuada augue, sit amet ornare arcu. Mauris iaculis, ipsum eget rhoncus rutrum, urna erat sollicitudin neque, sed vestibulum nisi lectus at justo. Nam ac ipsum odio. Integer commodo sapien in pellentesque viverra. Aenean pellentesque auctor mauris sed faucibus. Nulla facilisi. Ut pharetra commodo lectus, eu tempor tortor suscipit in. Praesent tempor turpis orci, at tristique purus semper quis.
</p>
</div>
</body>
</html>这应该总是用图像填满屏幕。它不会缩小，但会放大（您可以通过在图像的 URL 中设置较小的尺寸来测试这一点。例如http://lorempixel.com/300/300）
为了使图像与窗口的确切宽度一致，同时保留其纵横比，您只需更改以下内容：
.image-container img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* CSS3 extra to center the image */
-webkit-transform: translate(-50%, -50%); /* for Safari */
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
收件人：
.image-container img {
width: 100%;
height: auto;
}
【讨论】：