-2

コンテナー CSS で 100% を使用しているときに問題に直面しています。ここに、右側の画像に示されている RED の背景色が見える画像を同封します。

画像がコンテナを完全に満たしていない問題を示す画像

ここに、すべての 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/ )

4

1 に答える 1

0

問題の一部は、実際には中央の div だけがそれを必要とし、他の div の上に配置できるのに、左右の div を歪ませる必要があると考えていることだと思います。

中央の div の角をカバーするための鍵は、内側の div を100%幅を持たないように配置することですが、左右に 55px から開始します。これは、結果として得られる緑色の三角形の左右の幅です。

あなたのフィドルへのこのアップデートをチェックしてください: http://jsfiddle.net/XQNzu/7/

他の多くのプロパティを変更しました。最も顕著なのは、img タグを背景画像付きの div に変更したことです。これにより、background-size: coverプロパティを使用して、縦横比の変更や角が覆われないままになることを回避できます。

結果は、正確ではなかったものと同様であり、おそらく少し調整して、適切に調整する必要があります.

于 2013-07-14T16:23:33.123 に答える