离子标头栏中的图像尺寸大于标头本身

我有这个HTML：

<ion-header-bar align-title="center">
<div class="back_btn_container">
&nbsp;
</div>
<div class="logo_container">
<div style="text-align: right">
&nbsp;<img ng-src="img/newlogo2.png" />
</div>
</div>
</ion-header-bar>

而这个CSS：

.back_btn_container{
width:20%;
padding-top: 10px;
}
.logo_container{
width:80%;
}

newlogo2.png为200X45px。

在chrome开发工具和Iphone 5中查看应用程序时，徽标图像超出了栏的边界。这意味着：并非所有徽标都是可见的。我真的不明白为什么。ionic.css是否应该注意使图像不超出边界？这就是我所希望的。或者，也许我在这里还缺少其他东西？

- - 编辑 - - -

请看所附图片。

-编辑2 ---

这是所有html（仅标头部分）：

<ion-header-bar align-title="center" class="header_bar_logged_in bar bar-header">
    <div class="back_btn_container">
        &nbsp;
    </div>
    <div class="logo_container">
        <div style="text-align: right">
            &nbsp;<img ng-src="img/newlogo2.png" src="img/newlogo2.png">
        </div>
    </div>
</ion-header-bar>

这里是与html元素相关的css：

.header_bar_logged_in {
background-color: blue !important;
}
.bar {
background-image: none !important;
background-color: transparent !important;
}
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
@media not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx)
.bar {
border: none;
background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
.bar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid #ddd;
background-color: white;
background-size: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.back_btn_container {
width: 20%;
padding-top: 10px;
}
.logo_container {
width: 80%;
}
@media (max-width: 991px)
.logo_container img {
width: 100%;
height: 100%;
}
img {
-webkit-user-drag: none;
}