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

Question

I am trying to create a drawing using only CSS by blocks, but as the browser window resizes, the whole drawing breaks down.

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

Answer 1

If you want to make this shape for static purpose I recommend you to use SVG format, but I think you want to make it as a dynamic thing like it can rotate its hand or such a thing.

so, you have some shape and want to stick them together. I suggest to use a div for main axis, and other things (hands and feet), they stick to this axis. so cool let's do that in code,

in your css do something like:

.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;
}

and in your html can be:

<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>

in this way you've wrap your all organs in a body that they stick to it. so in every screens, the can not separate. if you want to make their size fixed too, use % or vw or vh, like:

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