Question

我已经构建了一个纯CSS图像，并在React中作为组件导出。我想根据其父项的大小缩小其大小。

我尝试在容器className，对象适合度和transform：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>
        )
    }
}

然后，例如，将其渲染到超大tron内。我尝试将其嵌套在其他元素和容器组件中。

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

如何按比例缩小纯CSS组件以适合父组件？

1 个答案: