Tricky CSS：沒有直接容器的裁剪圖像

我目前在棘手的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是在同一條線上，頭部和身體之間沒有空白。

來源

2016-01-21 OhmWang

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

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

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

簡而言之：沒有。正如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/

來源

2016-01-22 08:06:23 Nate

Tricky CSS：沒有直接容器的裁剪圖像

回答

相關問題