html - 带有图像和文本的横幅在调整大小时不改变大小

Question

我正在尝试创建一个标有我提供的一些服务的横幅，下图正是我想要的(桌面 View )但是当我调整浏览器大小时，文本被推到图像下方并被超过元素隐藏页面重叠。

如何使图像和文本随浏览器调整大小并看起来与在桌面上完全一样？

我在这里创建了一个示例 http://jsfiddle.net/b7a8cvLb/4/

还有我的 CSS

.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;

}

.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}

.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}

.info_block h5  {
height:100%;
width:100%;
margin:0;   
}

如果需要，我可以将图像设置为在特定浏览器宽度下显示:无，但我宁愿避免这样做。

Answer 1

我可以看到你的图片已经缩小了，如果你也想缩小你的文字，你需要使用 media queries. 来缩小它。

希望对您有所帮助!