HTML如何将图片放在指定文本下方并置于页面底部占满全宽

核心问题说明 #

你之前的代码不生效主要有两个原因：

1. 图片没有添加固定到底部、满宽的样式规则
2. 所有元素都用了绝对定位（position: absolute），没有统一的位置逻辑，导致图片位置乱跑

完整修改后的代码（直接复制替换你原来的全部代码即可） #

<html>
  <head>
    <style type="text/css">
      /* 全局基础重置，避免默认边距干扰 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: black;
        /* 给body加最小高度，保证页面能撑到足够显示底部图片 */
        min-height: 170vh;
      }
      h1 {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 50px;
        text-align: center;
        color: white;
        position: absolute;
        /* 这个数值可以自己调，越大段落越靠下，不要超过85%避免压到图片 */
        top: 80%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      /* 底部图片专属样式 */
      .bottom-full-img {
        /* 占满整个浏览器宽度 */
        width: 100vw;
        /* 固定高度700px，不需要可以删掉这行让高度自适应 */
        height: 700px;
        /* 图片按比例缩放，不会变形 */
        object-fit: cover;
        position: absolute;
        /* 固定在页面最底部 */
        bottom: 0;
        left: 0;
        /* 去掉图片默认的下方空隙 */
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>hello</h1>    
    <p>this is what i do</p> 
    <img class="bottom-full-img" src="daniel-leone-v7daTKlZzaw-unsplash.jpg" alt="mountains">
  </body>
</html>

关键配置说明 #

• 如果你想调整「this is what i do」段落和图片的距离，只需要修改p样式里的top数值就行，数值越大段落越靠下
• 如果你的图片和HTML文件不在同一个文件夹，需要把src里的路径改成你图片的实际存储路径
• object-fit: cover的作用是保证图片不变形，会自动裁剪适配1920x700的尺寸，不会拉伸模糊

内容的提问来源于stack exchange，提问作者20sparks