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％爲圖像;