带有图片和文字的横幅调整大小而不更改调整大小

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.

来降低它

希望有所帮助！