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;
}
正在发生的事情的图像,这是现在正在发生的小型人像屏幕,这是完美的:
然而,这并不完美,从横向看,徽标会在其单元格之外流动:
如何阻止徽标溢出其表格单元格?
答案 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;
}