带有图像和文本的横幅调整大小而不改变调整大小

Question

我正在尝试创建一个横幅，其中包含我提供的一些服务，下面的图片正是我想要的（桌面视图），但是当我调整浏览器的大小时，文本被推到图片下方并被页面重叠。

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

我在这里创建了一个示例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.来缩小它

希望有帮助！