Question

我有图像（宽度= 1920px），我需要在较低分辨率的图像中间以全高清分辨率（宽度= 1920像素）显示整个图像（见屏幕截图）： screenshot

你可以帮我添加CSS风格，以较小的重塑次数显示图像中心吗？

    //html:
    <body>
        <div class="header">
        </div>
    </body>

    //css:
    html, body {
        margin: 0;
        padding: 0;
    }
    .header{
        background-image: url(Header.png);
        width: 100%;
        height: 292px;    
    }

Answer 1

试试这个：

background-image: url('path/to/img.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;

可选：

background-position: center;

Answer 2

使用.header { height: 1080px; background: url(http://www.cats.club/wp-content/uploads/2017/03/image_header_option.jpg); background-size: cover; background-position: center; }使图像居中，因此当宽度小于图像尺寸时，中心将保持可见。

＆＃13;

<header class="header"></header>

＆＃13;

background-position: center;

＆＃13;

Answer 3

只需使用background-size: cover;和.header { width: 200px; height: 200px; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Christopher_Condent.svg/1000px-Flag_of_Christopher_Condent.svg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; }即可。您可以找到有关这些属性和属性值的文档 here 。

请参阅代码段。最初的image是三个海盗头骨。在这里你可以看到它以父div为中心。

＆＃13;

<div class="header">
</div>

＆＃13;

 <Element>
    <h1>
        <title>Name1</title>
    </h1>
    <h1>
        <title>Name2</title>
    </h1>
    <para>Test1</para>
    <para>Test2</para>
    <h1>
        <title>Name3</title>
    </h1>
    <para>Test3</para>
    <para>Test4</para>
</Element>

＆＃13;

在标题中显示图像的中间部分

3 个答案: