如何让 CSS 绘图在每个屏幕上始终固定显示？

Question

我正在尝试仅使用 CSS 按块创建绘图，但是随着浏览器 window 调整大小，整个绘图都崩溃了。

如何让绘图在每个屏幕上始终固定显示？ Picture

Answer 1

使用 position: relative 和 position: absolute 组合，以便您的部分图像保持完整。

对图像容器（父元素）使用 position: relative，对图像使用 position: absolute。然后相应地使用 top/bottom/left/right 定位

Answer 2

如果你想为静态目的制作这个形状，我建议你使用 SVG 格式，但我认为你想把它制作成动态的东西，比如它可以旋转它的手之类的东西。

所以，你有一些形状，想把它们粘在一起。我建议使用 div 作为主轴和其他东西（手和脚），他们坚持这个轴。太酷了，让我们在代码中做到这一点，

在您的 css 中执行如下操作：

.body {
    position: relative;

    width: 100px;
    height: 400px;
}

.organ {
    position: absolute;
}

.head {
    top: 0;
    /* to centerlize  */
    left: 50%;
    transform: translateX(-50%);
    /* to centerlize  */
}

.hand_right {
    top: 20px;
    right: 0;
}

.hand_left {
    top: 20px;
    left: 0;
}

.hand_right {
    bottom: 0;
    right: 0;
}

.hand_left {
    bottom: 0;
    left: 0;
}

在您的 html 中可以是：

<div class="body">
    <div class="organ head"></div>

    <div class="organ hand_right"></div>
    <div class="organ hand_left"></div>

    <div class="organ foot_right"></div>
    <div class="organ foot_left"></div>
</div>

通过这种方式，您可以将所有器官包裹在一个 body 中并粘附在上面。所以在每一个画面中，都离不开。如果你也想固定它们的大小，请使用 % 或 vw 或 vh，例如：

width: 80%; // percentage according to parent size
width 70vw; // viewport width
height: 30vh; // viewport height

如何让 CSS 绘图在每个屏幕上始终固定显示？

How can I make the CSS drawing always show fixed in every screen?

css

size

drawing

resolution

screen