html - 使图像在我的页面上响应无法正常工作

Question

我已经尝试让我的页面响应，但到目前为止还没有真正奏效。这是因为某些图像会变成其正常大小的特定百分比，而不是相对于我的 wrapper 的百分比。我会很感激一些帮助。提前致谢，泰斯

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%;
}