Как уменьшить чистый CSS-компонент до родительского компонента?

Question

Я построил чистое изображение CSS, экспортированное как компонент в React. Я хотел бы уменьшить его размер в зависимости от размера его родителя.

Я пытался установить максимальные размеры для контейнера className, подгонка объекта и преобразование: scale. Либо чистый компонент CSS исчезает, либо не меняет размер. Я не могу понять, как заставить его реагировать на своего родителя.

$shirt-color: #D2DADE;
$body-color: #F5EAD9;
$face-color: rgb(105, 97, 88);
$hair-color: rgb(177, 141, 107);
$background-color: #CCCCCC;

.body,
.head,
.neck-shadow,
.neck,
.ears,
.eyes,
.mouth,
.hair,
.glasses {
    position: relative;
}

.body {
    background: $shirt-color;
    border-radius: 100%;
    height: 50%; width: 55%;
    left: 23%; top: 75%;
    z-index: 1;
}

.container {
    object-fit: scale;
    margin: 1%;
    width: 25vw; height: 25vw;
    max-width: 250px; max-height: 250px;
    border-radius: 50%;
    background-color: $background-color;
    overflow: hidden;
    z-index: -20;
}

.ears {
    background: $body-color;
    border-radius: 50%;
    top: 10%; left: -10%;
    width: 22%; height: 20%;

    &::before {
        background: $body-color;
        border-radius: 50%;
        position: absolute;
        content: '';
        top: 0%; left: 450%;
        width: 100%; height: 100%;
    } 
}

.mouth {
    border: 4px solid;
    border-radius: 100%;
    border-color: transparent transparent $face-color $face-color;
    top: -10%; left: 35%;
    width: 28%; height: 25%;
    transform: rotate(-45deg);
}

.eyes {
    border-radius: 100%;
    background: rgba(241, 150, 30, 0.5);
    top: 0%; left: 44%;
    width: 10%; height: 15%;

    &::before, &::after {
        position: absolute;
        content: '';
        background: $face-color;
        border-radius: 100%;
        width: 100%; height: 60%;
        top: -20%;
    }
    &::before {
        left: -200%;
    }
    &::after {
        left: 200%;
    }
}

.hair {
    background: $hair-color;
    border-top-left-radius: 75%;
    border-top-right-radius: 75%;
    top: -10%; left: 0%;
    width:105%; height: 40%;

    &::before, &::after {
        background: $hair-color;
        position: absolute;
        content: '';
    }
    &::before {
        border-top-left-radius: 30%;
        border-bottom-left-radius: 75%;
        top: 75%; left: -17%;
        width: 22%; height: 110%;
    }
    &::after {
        border-top-right-radius: 30%;
        border-bottom-right-radius: 75%;
        top: 75%; left: 92%;
        width: 15%; height: 100%;
    }
}

.hair .hair-content {
    &::before, &::after {
        background: $hair-color;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 40%;
    }
    &::before {
        border-bottom-right-radius: 60%;
        left: 30%;
        width: 30%; height: 75%;
    }
    &::after {
        border-bottom-right-radius: 75%;
        left: 50%;
        width: 45%; height: 100%;
    }
}

.head {
    background: $body-color;
    border-radius: 40px;
    left: 12%; top: -111%;
    width: 75%; height: 80%;
    z-index: 5;
  }

.neck {
    background: linear-gradient(rgb(179, 170, 157) 49%, $body-color 49%, $body-color );
    border-radius: 45%;
    border-color: #444 #444 #444 #444;
    left: 42%; top: -15%;
    width: 15%; height: 25%; 
    z-index: 0;
}

import React, { Component } from 'react';
import './Bradley.scss'

export default class Bradley extends Component {
    render() {
        return (
            <div>
                <div className = 'container' >
                    <div className = 'head'>
                        <div className = 'hair'>
                            <div className = 'hair-content'/>
                        </div>
                        <div className = 'ears'/>
                        <div className = 'eyes'/>
                        <div className = 'mouth'/>
                        <div className = 'neck'/>
                    </div>
                    <div className = 'body'/>
                </div>
            </div>
        )
    }
}

А потом я рендерил его, например, внутри Jumbotron. Я пытался вложить его в другие элементы и компонент контейнера.

import React from 'react';
import Bradley from './components/Bradley/Bradley'
import {Row, Col, Jumbotron, Container} from 'react-bootstrap'
import './App.css';

function App() {
  return (
    <div>
      <Jumbotron>
          <Bradley/>
      </Jumbotron>
    </div>
  );
}

export default App;

Изображение остается того же размера и переполняется из контейнера. Изменение размера окна ничего не делает.

РЕДАКТИРОВАТЬ: теперь он хорошо вписывается, и я использую% для всех высот и ширины, но это выглядит ужасно, когда я уменьшаю экран,

Answer 1

Измените ваши единицы измерения на %, свойство scale не будет работать с жестко закодированными измерениями, такими как 32px