Question

在容器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/）

Answer 1

我认为问题的一部分是认为你的左右div需要倾斜，而真正只有中间div需要它并且可以放在其他div之上。

覆盖中间div角的关键是将内部div设置为不具有100%宽度，而是向左和向右开始55px，这是左右生成的绿色三角形的宽度。

查看您的小提琴的此更新：http://jsfiddle.net/XQNzu/7/

我更改了许多其他属性，最明显的是将img标记更改为带有背景图像的div，以便您可以使用background-size: cover属性来避免更改宽高比或保留未覆盖的角落。

结果类似于你并不精确的结果，你可能会想做一些调整以使它适合你。

CSS 100％宽度问题

1 个答案: