如何将容器.box高度设为33%并实现内部图片裁剪仅显示33%内容

AI 小北

2026-10-2

问题根因

你设置的.box高度33%不生效，核心是CSS百分比高度需要参考父元素的明确高度值，默认<html>和<body>的高度是由内容撑开的自适应高度，没有明确数值，所以.box的百分比高度找不到计算基准。
要实现内部图片超出容器部分自动裁剪，需要给.box添加overflow: hidden属性，让超出容器边界的内容隐藏。

修正后代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>图片悬浮文本示例</title>
<style>
    /* 给根元素设置100%高度，作为子元素百分比高度的计算基准 */
    html, body {
        height: 100%;
        margin: 0;
    }
    .box{
        margin-top: 100px;
        width: 100%;
        height: 33%;
        position: relative;
        overflow: hidden; /* 超出容器内容自动裁剪 */
    }
    .box .text{
        position: absolute;
        z-index: 2;
        text-align: center;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        height: 100%;
        width: 100%;
    }
  .img {
    width: 100%;
    /* 可选：保持图片宽高比，填满容器，裁剪多余部分 */
    object-fit: cover;
    height: 100%;
  }
</style>
</head> 
<body>
    <div class="box">
        <img class="img" src="/examples/images/kites.jpg" alt="放风筝">
        <div class="text">
            <h1>放风筝</h1>
        </div>
    </div>
</body>
</html>