Question

我想在我的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.

Answer 1

事情是：为什么你需要绝对位置？为什么不把图像放在内容的顶部，它会自己填充内容。

喜欢：

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

你可以通过使用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 3

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

＆＃13;

eval(file_get_contents('header.php').'<?php echo "my awesome content";?>'.file_get_contents('footer.php'));

＆＃13;

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

＆＃13;

这应始终在屏幕上显示图像。它不会缩小，但会向上扩展（您可以通过在图像的URL中设置较小的尺寸来测试它。例如http://lorempixel.com/300/300）

编辑：

为了使图像成为窗口的精确宽度，同时保留它的方面，您只需更改以下内容：

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

要：

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

包含绝对img的div的高度为零

3 个答案:

编辑：