css - 标题横幅不会在手机/小型平板电脑上调整大小

Question

由于该公司 Logo 的高度/设计，我们创建了包含它的标题图片。该标题图片位于此处:

http://tinyurl.com/oqkpvff

有人知道如何为移动设备/小型平板电脑自动调整标题图片的大小吗？

#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}

我确实尝试了 height: auto 但这也没有用。

Answer 1

您可以使用 background-size: contain;

Demo

#title-container {
    background-image: url("http://tinyurl.com/oqkpvff");
    background-position: left top !important;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 250px;
    max-width: 100% !important;
    position: relative;
    background-size: contain;
}

contain

This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.