我目前正在努力解决一个棘手的 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 之间没有空白。
最佳答案
简短的回答:没有。作为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
。
结论:怎么样?
关于javascript - 棘手的 CSS : crop image without direct container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34932857/