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

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

您的给予者宽度仅为#bar1 div。

也为其余的div赋予宽度。 写：

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

Fiddle here.

Answer 2

同时尝试使用max-width：100％的图像;