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％宽度问题

回答

相关问题