在我的页面上响应图像不能正常工作

Question

我试图让我的页面响应，但到目前为止，事情并没有真正发挥作用。这是因为一些图像成为正常大小的某个百分比，而不是相对于我的包装器的百分比。我很感激一些帮助。提前致谢， 泰斯

HTML：

<div id = "wrapper">
<div class = "menuitem">
<img src = "media/producten.png" class = "menuitemfoto">
</div>
<div class = "menuitem">
<img src = "media/info.png" class = "menuitemfoto">
</div>
<div class = "menuitem">
<img src = "media/fotos.png" class = "menuitemfoto">
</div>
<div class = "menuitem">
<img src = "media/contact.png" class = "menuitemfoto">
</div>
</div>

CSS：

#wrapper{
width:1130px;
margin-left:auto;
margin-right:auto;
}

.menuitem{
float:left;
padding-left: 10px;
}

@media screen and (max-width:1129px){
#wrapper{
width:100%
}

.menuitemfoto{
width: 25.7%;

}
}

Answer 1

试试这个。希望这会对你有所帮助。 http://jsfiddle.net/t72uknLc/1/
变化是 -

.menuitem{
    display: inline;
}
.menuitemfoto{
    width: 24%;
}