[英]CSS - Stop table cell background overflowing outside of its width/height
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;
}
Images of what's happening, this is what is happening now with a small portrait screen, this is perfect: 所发生的事情的图像,这是现在正在发生的事情,带有一个小的人像屏幕,非常完美:
This however is not perfect, when viewed in landscape the logo flows outside of its cell: 但是,这不是完美的,当从横向观察时,徽标从其单元格外部流动:
How can I stop the logo from overflowing outside of its table cell? 如何防止徽标溢出到其表格单元之外?
background-size: 100% auto;
is stretching your background to fill it's parent horizontally. 正在拉伸背景以水平填充其父级。 As the width:height aspect ratio of the element increases beyond that of the background image, the image is forced to grow vertically beyond it's container in order to fill that 100% width.
当元素的width:height纵横比增加到超过背景图像的纵横比时,图像将被迫垂直超出其容器,以填充该100%的宽度。
What you want is just background-size: contain;
您想要的只是
background-size: contain;
, as that will constrain it to the size of the element and make it as large as possible without stretching it. ,因为这会将其限制为元素的大小,并在不拉伸的情况下使其尽可能大。
div{
background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat center center;
background-size: contain;
height: 200px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.