我目前在棘手的CSS問題上掙扎,因爲我無法解決。我想(在兩行的兩對二)建立一個IMG控制器,其可以顯示:Tricky CSS:沒有直接容器的裁剪圖像
- 在全尺寸的左上角圖像,
- 右上方在溢出-x:滾動(或汽車等)
- 左下在溢出-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不會被裁剪。即使max-size on #global,overflow-x在左上角。可以在不使用px的情況下解決此問題?
編輯:感謝Fausto NA,JSFiddle。在我的項目中,兩個頂部的img是在同一條線上,頭部和身體之間沒有空白。
撥打的jsfiddle與佔位符相似圖片:https://jsfiddle.net/r0vLysmg /並指定它們的大小,以便我們可以更好地幫助您。 –
我做了,但對我來說,兩個頂級* img *是在同一行上,頭部和身體之間沒有空白。 – OhmWang
什麼?您沒有閱讀我的評論... –