javascript - 如何缩小纯 CSS 组件以适应父组件？

问题描述

我构建了一个纯 css 图像，在 React 中作为组件导出。我想根据其父级的大小缩小它的大小。

我尝试在容器类名、对象拟合和变换上设置最大尺寸：比例。纯 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;

图像保持相同大小，并从容器中溢出。调整窗口大小没有任何作用。

编辑：它现在很合适，我对所有高度和宽度都使用 %，但是当我缩小屏幕时它看起来很糟糕，

标签： javascripthtmlcssreactjslayout

javascript - 如何缩小纯 CSS 组件以适应父组件？

问题描述

解决方案

推荐阅读