divs中的图像彼此相邻 - 图像未完全显示

Question

我正在尝试制作使用html和css的网站。

我把5个div放在一起，宽度和高度取决于窗口的大小。然后我已经把图像放在每个div中。这些图片的大小还取决于窗口的大小。

我遇到的问题是只有我的图像的一部分显示在div中。 代码：

<div id="cotainer"> 
<div id="bar1"><img src="modern_combat_1.jpg"></div> 
<div id="bar2"><img src="modern_combat_2.jpg"></div> 
<div id="bar3"><img src="modern_combat_3.jpg"></div> 
<div id="bar4"><img src="modern_combat_4.jpg"></div> 
<div id="bar5"><img src="modern_combat_5.jpg"></div></div> 

这就是风格：

html, body{margin:0;padding: 0;border:0;} 
#bar1 {top:35%;width:20%;bottom:35%;background-color:red;position:absolute;} 
#bar2 {top:35%;left:20%;right:0;bottom:35%;background-color:green;position:absolute;} 
#bar3 {top:35%;left:40%;right:0;bottom:35%;background-color:yellow;position:absolute;} 
#bar4 {top:35%;left:60%;right:0;bottom:35%;background-color:red;position:absolute;} 
#bar5 {top:35%;left:80%;right:0;bottom:35%;background-color:green;position:absolute;} 

#bar1 img{ 
width:100%; 
height:100%; 
} 
#bar2 img{ 
width:100%; 
height:100%; 
} 
#bar3 img{ 
width:100%; 
height:100%; 
} 
#bar4 img{ 
width:100%; 
height:100%; 
} 
#bar5 img{ 
width:100%; 
height:100%; 
} 

里边反的结果是，在中间的3张图片没有完全的div显示 有人可以帮助我，使3在中间的图片完全显示

Answer 1

你送礼宽度只有210格。

给其余的div也给宽度。 写：

#bar1,#bar2,#bar3,#bar4,#bar5{width:20%;} 

Fiddle here.

Answer 2

同时尝试使用最大宽度：100％为图像;