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

标签 html css responsive-design

我已经尝试让我的页面响应,但到目前为止还没有真正奏效。这是因为某些图像会变成其正常大小的特定百分比,而不是相对于我的 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/

相关文章:

html - float 不能正常工作

CSS Sprite垂直重复问题

javascript - content.toggleAnimationClass();不是函数

html - 响应式 CSS 未加载?

html - Bootstrap Image Responsive 在 IE 上搞砸了

html - Bootstrap 响应不起作用。

JavaScript 小部件不适用于我的网站

css - 关于单个 block 内字体颜色的良好 HTML5 做法是什么?

css - 什么软件可以作为 CSS 的多合一跨浏览器?

图像最大宽度(非 float )在 float div 旁边使用空间?