ion-header-bar中的图像大小高于条形本身

Question

我有这个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中查看应用时，徽标图像超出了条形图的边界。这意味着：并非所有徽标都可见。 我真的不明白为什么。不应该离心吗会照顾不要让图像超出界限吗？ 这是我所希望的。或者也许我在这里找不到其他东西？

---- ----- EDIT

请查看附件图片。

---编辑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;
}

Answer 1

关注你的bar CSS样式，ion-header-bar的类。它的高度等于44px（并且你的图像有45px），它也定义了填充（等于5px）。

尝试删除height属性，div应自动适合其内容。

Answer 2

在{/ p>等媒体查询上提供100% width

＆＃13;

＆＃13;

@media(max-width:991px){
.back_btn_container img {
  width:100%;
}
}

＆＃13;

＆＃13;

＆＃13;