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

【问题标题】：Tricky CSS : crop image without direct container棘手的 CSS：在没有直接容器的情况下裁剪图像
【发布时间】：2016-01-23 17:37:36
【问题描述】：

我目前正在努力解决一个我无法解决的棘手 CSS 问题。我想构建一个 img（两行两行）控制器，它可以显示：

左上角的全尺寸图片，
overflow-x:scroll（或自动等）的右上角，
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 在同一行，并且头部和身体之间没有空白。

【问题讨论】：

用这样的占位符图像制作一个 JSFiddle：jsfiddle.net/r0vLysmg 并指定它们的大小，以便我们更好地为您提供帮助。
我做到了，但对我来说，顶部的两个 img 在同一行，并且头部和身体之间没有空白。
什么？你没有看我的评论...
对不起，我以前从未使用过这个工具。我没有分叉就更新了。我编辑了我的消息，并here is the link。
我很难理解你到底想做什么。对不起:(

标签： javascript jquery html css image

【解决方案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/

【讨论】：