CSS - 阻止表格单元格背景溢出其宽度/高度

时间:2014-04-26 20:23:45

标签: javascript jquery html css

HTML / CSS:

<header>
    <div id="left" class="cell"></div>
    <div id="centre" class="cell"></div>
    <div id="right" class="cell"></div>
</header>

header {
    height: 18%;
    background-color: #0099ff;
    display: table;
    width: 100%;
}

.cell {
    display: table-cell;
}

#left {
    width: 20%;
    background: url("../img/3lines.png") no-repeat center center;
    background-size: 25% auto;
}

#centre {
    width: 60%;
    background: url("../img/logo.png") no-repeat center center;
    background-size: 100% auto;
}

#right {
    width: 20%;
    background: url("../img/3lines.png") no-repeat center center;
    background-size: 25% auto;
}

正在发生的事情的图像,这是现在正在发生的小型人像屏幕,这是完美的:

enter image description here

然而,这并不完美,从横向看,徽标会在其单元格之外流动:

enter image description here

如何阻止徽标溢出其表格单元格?

1 个答案:

答案 0 :(得分:2)

background-size: 100% auto;正在拉伸你的背景以水平填充它的父级。随着元素的宽度:高度纵横比增加超过背景图像的宽高比,图像被迫垂直增长超出其容器,以填充100%的宽度。

你想要的只是background-size: contain;,因为它会将它约束到元素的大小,并使其尽可能大而不拉伸它。

div{
    background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat center center;
    background-size: contain;
    height: 200px;
}

JSFiddle