Question

我创建了2个网站 - 如何在移动设备上正确调整标题背景图片大小？在移动设备上观看时，两侧都会切断图像。

我在每个标题部分都有这个代码：

以下是每个代码：

segregatedsunday.com

    #h {
    background: url(../img/header.jpg) no-repeat center top;
    padding-top: 180px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 700px;
    width: 100%;
    color: white;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

whitehatdev.co

 #headerwrap {
    background: url(../img/header_bg.jpg) no-repeat center top;
    margin-top: -50px;
    padding-top:120px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 650px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

我正在看你的第一个例子，它通常看起来很好。额外的100％背景大小的东西不适合这种情况。当我拖动jsfiddle越来越大时，图像会像“cover”那样动态调整大小。も！

jsfiddle

void disallowed_call(void)
{ abort(); }

void testfunc(void)
{
     printf("Hello, world!\n");
}

void childcode(void (*notrestricted)(void), void (*restricted)(void);)
{
     printf("Non restricted call:\n");
     *notrestricted();
     printf("Restricted call:\n");
     *restricted();
}

int main()
{
     fork();
     if (getpid() == 0)
     {
          childcode(&testfunc, &testfunc);
     }
     else
     {
          childcode(&testfunc, &disallowed_call);
     }
     return 0;
}

你不是在混淆封面而是包含你吗？你不清楚你要达到的目标是什么。 Cover和Contain将保持纵横比，因此不会使图像失真。

包含

包含值指定无论大小如何   包含框，应该缩放背景图像以使每个   边尽可能大，但不超过长度   容器的相应侧面。

盖

封面值指定背景图像的大小应如此   它确保两个尺寸尽可能小   大于或等于容器的相应大小。

2个Bootstrap网站没有背景图片没有响应

1 个答案: