2016-01-21 20 views
1

我目前在棘手的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 #globaloverflow-x在左上角。可以在不使用px的情況下解決此問題

編輯:感謝Fausto NA,JSFiddle。在我的項目中,兩個頂部的img是在同一條線上,頭部和身體之間沒有空白。

+1

撥打的jsfiddle與佔位符相似圖片:https://jsfiddle.net/r0vLysmg /並指定它們的大小,以便我們可以更好地幫助您。 –

+0

我做了,但對我來說,兩個頂級* img *是在同一行上,頭部和身體之間沒有空白。 – OhmWang

+0

什麼?您沒有閱讀我的評論... –

回答

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/