javascript - 棘手的 CSS : crop image without direct container

Question

我目前正在努力解决一个棘手的 CSS 问题，但我无法解决。我想构建一个可以显示的 img(两行两行) Controller :

• 左上角的全尺寸图片，
• overflow-x: scroll 中的右上角(或 auto 等)，
• overflow-y 中的左下角:滚动 (...)，
• 右下角都有。

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

我的 HTML:

    <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 上有 max-size，左上角的 overflow-x 也是如此。是否可以不使用 px 来解决这个问题？

编辑:感谢 Fausto NA，一个 JSFiddle .在我的元素中，两个顶部 img 在同一行上，头部和 body 之间没有空白。

Answer 1

简短的回答:没有。作为this post解释说，您需要设置 DIV 的宽度或高度，否则它会根据其 IMG 子项自动调整大小。此外，如果您希望每个 IMG 都有自己的滚动条，则需要在每个 IMG 周围放置一个滚动 DIV。

长答案:您应该复习您对 CSS 的理解。 html body #global #feature-container #feature-container 表示“将此样式应用于 #feature-container，它是另一个 #feature- 的某个间接子级container，它是 #global 的间接子级，它是一个间接...而且你还没有 #feature-container 是的子级另一个 #feature-container。还有其他 CSS 规则与您的 HTML 中的任何内容都不匹配，例如 img#feature-container。

结论:怎么样？

https://jsfiddle.net/xve5jakh/1/