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%；