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

Question

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

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;
}

我确实试过身高：自动，但那也不起作用。

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;
}

  

包含

     

此关键字指定应将背景图像缩放为尽可能大＆gt;同时确保其尺寸   小于或等于相应的尺寸   背景定位区。