棘手的CSS:在没有直接容器的情况下裁剪图像

我目前正在为一个棘手的CSS问题而苦苦挣扎，我无法解决。我想构建一个 img（两行上的二乘二）控制器，它可以显示：

• 左上角的全尺寸图像，
• 溢出-X的右上角：滚动（或自动等），
• 溢出-y中的左下角：滚动（...），
• 右下角两者兼而有之。

有点像Excel修复列/行功能。

我的网页 ：

    <div id="global">
        <div id="feature-container">
            <div id="feature-head">
                <img id="feature-t-l" src="..." alt="..."/>
                <img id="feature-t-l" src="..." alt="..."/>
            </div>
            <div id="feature-body">
                <img id="feature-b-l" src="..." alt="..."/>
                <img id="feature-b-r" src="..." alt="..."/>
            </div>
        </div>
    </div>

我的 CSS ：

    html {
      height: 100%;
    }
    html body {
      height: 100%;
      margin: 0 8px 0 8px;
      background-color: darkgrey;
    }
    html body h1 {
      height: 10%;
      width: 100%;
      margin: 0;
      padding-top: 2%;
      box-sizing: border-box;
      text-align: center;
    }
    html body #global {
      height: 90%;
      width: 100%;
      max-width: 100%;
      padding: 0% 2.5% 5% 2.5%;
      box-sizing: border-box;
    }
    html body #global #feature-container {
      height: 100%;
      width: 100%;
      background-color: white;
    }
    html body #global #feature-container #feature-header {
      width: 100%;
      white-space: nowrap;
    }
    html body #global #feature-container #feature-header > img {
      vertical-align: bottom;
    }
    html body #global #feature-container #feature-header img#feature-t-l {
      overflow-x: scroll;
    }
    html body #global #feature-container #feature-body {
      width: 100%;
      white-space: nowrap;
    }

目前，左上角的 img 未裁剪。即使最大尺寸在 #global，左上角的溢出 x。可以在不使用 px 的情况下解决此问题？

编辑：感谢Fausto NA，一个JSFiddle。在我的项目中，两个顶部 img 在同一条线上，头部和身体之间没有空白。