响应式图像中的奇怪填充

Question

我尝试使用浮动文本实现bilboard。请参见截图：

所以，我为此写了一些代码：

<div class="bilboard hcenter">
<div class="content">
    <div class="imwrap"><img src="img/dog.png" /></div>
    <span>WE'RE THE SAME PASSIONATE PEOPLE</span>
    <span>YOU KNOW AND LOVE</span>
</div>

和CSS：

    div.hcenter {
    margin-left: auto;
    margin-right: auto;
}

.bilboard {
    max-width: 1100px;
    background-color: #cd1b31;
    min-height: 205px;
    height: auto;
    width: 100%;
    padding-top: 20%;
    position: relative;
    z-index: 0;
}

.bilboard .content {
    margin-top: -20%;
    position: absolute;
    height: 100%;
    width: 100%;
}

.bilboard .content img {
    width: auto;
    height: 100%;
    float: right;}

.bilboard .imwrap {
    float: right;
    height: 100%;
    background-color: yellow;
}

如果我在firefox和IE中调整我的html大小，我会看到狗左边的奇怪的黄色填充：

在Chrome中一切都很好。

它是什么，我错在哪里？ 或者，也许我的方式是愚蠢的，代码是最简单的？有人可以帮我编码吗？

黄色仅用于显示问题。 imwrap block的宽度大于img

Answer 1

阅读你的问题，我认为这可能是由于设定了高度。我在下面的JSFiddle中对此进行了测试，似乎工作正常。

<强> HTML

<div class="bilboard hcenter">
    <div class="content">
        <img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Bon_toutou.png"/>
        <span>WE'RE THE SAME PASSIONATE PEOPLE</span>
        <span>YOU KNOW AND LOVE</span>
    </div>
</div>

<强> CSS

div.hcenter {
    margin-left: auto;
    margin-right: auto;
}

.bilboard {
    max-width: 1100px;
    background-color: #cd1b31;
    min-height: 205px;
    height: auto;
    width: 100%;
    padding-top: 20%;
    position: relative;
    z-index: 0;
}

.bilboard .content {
    margin-top: -20%;
    position: absolute;
    height: 100%;
    width: 100%;
}

.bilboard .content img {
    max-height: 100%;
    width: auto;
    float: right;
    background-color: yellow;
}

JSFiddle