div 包含绝对 img 的高度为零

Question

我想在我的 html 页面顶部放置一张图像，该图像固定在左上角位置（左：0，top:0）填充整个宽度，因此当window 尺寸变化。页面的其他内容必须放在图像下方。当 window 大小改变时，图像高度也会改变，所以我不能对 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.

Answer 1

您可以使用 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;
 }

注意：这会将图像设置为全视口宽度。包含在其中的滚动条。

Answer 2

问题是：为什么需要绝对位置？为什么不把图片放在内容的最上面，它会自己填充内容。

赞：

<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.

Answer 3

如果我理解正确，这应该可以解决您的问题：

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）

编辑：

为了使图像的宽度与 window 的宽度相同，同时保留其宽高比，您只需更改以下内容：

.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;
}

div 包含绝对 img 的高度为零

div containing absolute img has zero height

css-position

absolute

编辑：