当分辨率太小时，标题中的图像会停止缩放

问题描述 投票：0回答：1

我目前正在开发一个网站，并且我的标题中有一张图片。现在它是一个占位符，但问题是当我将页面缩小到手机分辨率时，图像停止缩小，然后开始被切断。This is what the website looks like on a normal resolution. Header works fine. Here is what happens when I use inspect element to make the resolution one of a phone. Same problem happens when you look at the site on a phone.

我一直在尝试更改一些标题选项，当图像变大时，图像将始终缩放以适合屏幕，但当图像变小时，它不想缩放。提供的是一个只有标题和导航栏的代码字符串。在此示例代码中，标头仍然存在相同的问题。忽略这样一个事实：如果您在全屏上打开它，它会缩放太大，实际的完整程序通常会强制它变小。

<!DOCTYPE html>

<html lang="en" dir="ltr"> <!--Direction left to right in english-->

<head> <!--random data like faviicon, .css file location, and site name-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
</head>

<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
    </div>
    </div>
</body>
<style>
    :root {
    --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');

    /* colors */
    --content: #43256E;
}



body {
    font-family: 'Lucida Console', "Lucida Console", monospace;
    font-size: 20px;
    margin: 0;
    background-color: #d19dfc;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 160px;
    color: #fceaff;
    background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
}

* {
    box-sizing: border-box;
}

#header {
    position: unset;
    height: 120px;
    width: auto;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-size: cover;
}

#flex {
    display: flex;
}

</style>

Here is the header image I am using just so anyone viewing can have the same image as me

html css
1个回答
0
投票

根据我从您的问题中理解的内容，这是一个简单的解决方案。我已将背景大小更改为 

contain
，以始终包含背景。还更改了背景位置/重复行为。

 :root {
    --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');

    /* colors */
    --content: #43256E;
}



body {
    font-family: 'Lucida Console', "Lucida Console", monospace;
    font-size: 20px;
    margin: 0;
    background-color: #d19dfc;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 160px;
    color: #fceaff;
    background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
}

* {
    box-sizing: border-box;
}

#header {
    position: unset;
    height: 120px;
    width: auto;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#flex {
    display: flex;
}
<!DOCTYPE html>

<html lang="en" dir="ltr"> <!--Direction left to right in english-->

<head> <!--random data like faviicon, .css file location, and site name-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
</head>

<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
    </div>
    </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.