Question

HTML / CSS初学者。试图让不同的div在不同的分辨率下保持不变。

为了得到我想要的东西，example

当我调整显示器大小或移动到其他屏幕时，this happens.

我被告知不要使用百分比......我现在知道为什么......哈哈。

任何提示或建议？

以下是代码：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Echoes from Firelink</title>
        <link href="homepage.css" type="text/css" rel="stylesheet">
        <link rel="shortcut icon" href="coiledsword.ico">
    </head>

    <header>
                <a href="homepage.htm" style="color:black">home | </a>
                <a href="homepage_easy.htm" style="color:black">lite version</a>
            </header><!--End header-->
    <body>
        <div id="background_container">
            <div id="center_container"></div>
            <div id="lore_container"></div>
            <div id="art_container"></div>
        </div>
    </body>
</html>

CSS：

/* CSS page for the homepage. */

header {
    text-align: center;
    font-size: 10px;
}
#center_container {
    background-image: url(from_black.jpg);
    background-size: contain;
    background-position: center;
    text-align:center;
    color: white;
    height: 200px;
    width: 200px;
    margin: auto;
    border-radius: 50%;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(180%);
}

#center_container:hover {
    background-image: url(from_white.jpg);
    transform: scale(1.5) translateY(100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#lore_container {
    background-image: url(from_black.jpg);
    background-size: contain;
    background-position: center;
    text-align:center;
    color: white;
    height: 300px;
    width: 300px;
    margin: -10% 50%;
    border-radius: 0%;
    transition: 2s;
    display: flex;
    -webkit-clip-path: polygon(0 0, 100% 100%, 50% 100%, 0 50%);
    clip-path: polygon(0 0, 100% 100%, 50% 100%, 0 50%);
    transform: translateX(5%) translateY(25%);
}

#lore_container:hover {
    transform: scale(1.5) translateX(50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#art_container {
    background-image: url(from_black.jpg);
    background-size: contain;
    background-position: center;
    text-align:center;
    color: white;
    height: 300px;
    width: 300px;
    margin: -14.75% 33.5%;
    border-radius: 0%;
    transition: 2s;
    display: flex;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%);
    transform: translateX(5%) translateY(25%);
}

#art_container:hover {
    transform: scale(1.5) translateX(50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

如何正确适应不同分辨率的物体？

0 个答案: