我已经尝试让我的页面响应,但到目前为止还没有真正奏效。这是因为某些图像会变成其正常大小的特定百分比,而不是相对于我的 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%;
}
}
最佳答案
试试这个。希望这会对你有所帮助。 http://jsfiddle.net/t72uknLc/1/
变化是——
.menuitem{
display: inline;
}
.menuitemfoto{
width: 24%;
}
关于html - 使图像在我的页面上响应无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32777198/