DIV + CSS 布局一DIV + CSS 布局一在页面布局时，我们可能会遇到这种情况：UI 给的设计稿上，需要图片

DIV + CSS 布局一

在页面布局时，我们可能会遇到这种情况：UI 给的设计稿上，需要图片超出容器左侧展示且超出容器高度隐藏，如图效果：

下面是一种简单实现，给 img 添加一个 div，从而控制 div 的高度，来实现纵向超出部分隐藏效果。

<!DOCTYPE html>
<html>
    <head>
        <title>布局</title>
        <style>
            * {padding: 0; margin: 0;}
            .page {
                width: 960px;
                margin: 60px auto;
            }
            .page_box1 {
                position: relative;
                width: 100%;
                height: 200px;
                padding-top: 100px;
                box-sizing: border-box;
                box-shadow: 0 1px 4px rgba(0,21,41,.08);
                /* background-color: yellowgreen; */
            }
            .page_box1-imgwrap {
                position: absolute;
                left: -36px;
                height: 100px;
                border-radius: 8px;
                overflow-y: hidden;
            }
            /* .page_box1-imgwrap>img {
                border-radius: 8px;
            } */
            .page_box2 {
                width: 100%;
                height: 360px;
                background-color: #f8fafb;
            }
        </style>
    </head>
    <body>
        <div class="page">
            <div class="page_box1">
                <div class="page_box1-imgwrap"><img src="./img1.webp" width="320px" /></div>
                <div class="page_box1-main"><span>盒子1</span></div>
            </div>
            <div class="page_box2">盒子2</div>
        </div>
    </body>
</html>

玩转其他的实现方式...