CSS 100％寬度問題

-2

在容器CSS中使用100％時遇到問題。在這裏，我附上了可以看到右側圖像中顯示的紅色背景色的圖像。CSS 100％寬度問題

Image showing the problem with image not completely filling container

在這裏，我給你我所有的CSS代碼的jsfiddle鏈接。請看看並告訴我需要修改哪些CSS，以便所有角度背景（紅色，黃色，綠色）都不會顯示。

我在不同ID中給出的總寬度也超過100％（左側給出了39％，中間50％和右側34％），這是總共123％。我知道我的部分是錯的，但我找不到任何其他方式來修復這個設計。

我的計算機屏幕分辨率是1600到900，在實現這些CSS後，我只能看到正確圖像中的紅色背景。但在較小的屏幕上，如鏈接所示，所有其他背景圖像都會顯示出來。

HTML

<div id="container"> 
    <div id="left"><img src="http://media-cdn.tripadvisor.com/media/photo-s/03/c3/1f/5f/working-people-exhibit.jpg"/></div> 
    <div id="middle"><img src="http://global.fncstatic.com/static/managed/img/Health/Women%20Working.jpg"/></div> 
    <div id="right"><img src="http://www.koindo.com/images/WORKING%20PEOPLE%20IMAGE.jpg"/></div> 
</div>

CSS

#container{ 
    width:100%; 
    background-color:orange; 
    height:300px; 
    overflow:hidden; 
    position:relative; 
} 

#left{ 
    position:absolute; 
    left:-4%; 
    display:inline-block; 
    width:39%; 
    background-color:red; 
    height:300px; 
    transform:skew(-20deg,0deg); 
    -ms-transform:skew(-20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */ 
    z-index:1; 
    overflow:hidden; 
} 
#left img{ 
    transform:skew(20deg,0deg); 
    -ms-transform:skew(20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/ 
    width:100%; 
    height:100%; 
} 
#middle{ 
    position:absolute; 
    margin-left:30%; 
    display:inline-block; 
    width:50%; 
    background-color:green; 
    height:300px; 
    transform:skew(-20deg,0deg); 
    -ms-transform:skew(-20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */ 
    z-index:2; 
    border-left:10px solid white; 
    overflow:hidden; 
} 
#middle img{ 
    transform:skew(20deg,0deg); 
    -ms-transform:skew(20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/ 
    margin-left:-11%; 
    width:100%; 
    height:100%; 

} 
#right{ 
    position:absolute; 
    right:-4%; 
    display:inline-block; 
    width:34%; 
    background-color:red; 
    height:300px; 
    border-left:10px solid white; 
    transform:skew(-20deg,0deg); 
    -ms-transform:skew(-20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */ 
    z-index:3; 
    overflow:hidden; 

} 

#right img{ 
    transform:skew(20deg,0deg); 
    -ms-transform:skew(20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/  
    width:100%; 
    height:100%; 

}

（上的jsfiddle：http://jsfiddle.net/swati712/XQNzu/5/）

來源

2013-07-14 roy712

請閱讀：[阻止鏈接到jsfiddle和無代碼的帖子]（http://meta.stackexchange.com/questions/149890/prevent-posts-with-links-to-jsfiddle-and-no-code/ ） – Antony

這裏是我的jsfiddle鏈接http://jsfiddle.net/swati712/XQNzu/5/ – roy712

@OP：我用較短的url替換了圖像鏈接，因爲它們並沒有真正添加任何內容到html代碼中，但它們使很難看到html的結構。 – Sumurai8

我認爲問題的一部分是認爲你的左邊和右邊的div需要被歪曲，而真正只有中間div需要它，可以放置d在別人之上。

覆蓋中間div的拐角的關鍵是將內部div設置爲不具有100%寬度，而是開始55px左側和右側，這是所得到的綠色三角形的左右寬度。

退房此更新您的提琴：http://jsfiddle.net/XQNzu/7/

我改變了一些其他的屬性，最顯着的改變，你的img標籤與背景圖像的DIV，這樣就可以使用background-size: cover屬性來避免改變長寬比或離開角落不覆蓋。

結果類似於你不是確切的，你可能會想做一些調整，以使它適合你。

來源

2013-07-14 16:23:33 Godwin

感謝Godwin ...它正是我想要的:) – roy712

Cool @ roy712，記得標記它是一個答案，如果它適合你。 – Godwin

我剛剛那樣做:) – roy712

CSS 100％寬度問題

回答

相關問題