内部 html div 宽度不符合预期宽度

Question

我正在为自己构建一个个人页面，使用 React 和用于 React 的样式组件等库。但是当我构建 header 部分时，内容突然开始不符合预期，内部 div 不再匹配其 parent 的宽度。代码如下：

import styled from 'styled-components'

export const SectionContainer = styled.section`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px;
    overflow: hidden;
`

import styled from 'styled-components'
import { SectionContainer } from '../components/SectionContainer'

const Container = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

    @media (min-width: 501px) {
        img {
            width: 500px;
            height: 550px;
        }
    }

    @media (max-width: 500px) {
        img {
            width: 70%
            min-width: 300px;
            height: 70%
        }
    }

    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px inset;
    overflow: hidden;

    h1 {
        font-size: 2.8rem;
        padding-top: 50px;
        padding-left: 10px;
    }

    h2 {
        font-family: 'Roboto';
        font-size: 1rem;
        padding: 0 10px;
    }

`

const Header = props => {
    return (
        <SectionContainer>
            <Container className='header'>
                    <h1>Eduardo Soares Dutra</h1>
                    <h2>Estudante de Ciência da Computação | Desenvolvedor front-end</h2>
                    <img src="src\media\Code typing-bro.svg" alt="Front-end Dev" />
            </Container>
        </SectionContainer>
    )
}

export default Header

Answer 1

从我在这里看到的情况来看，您似乎已指定对于任何 min-width 为 501 像素或更大的设备，容器的宽度设置为 500 像素。

@media (min-width: 501px) { 图片 { 宽度：500px; 高度：550px； } }

所以根据我的理解，这将覆盖父容器。

内部 html div 宽度不符合预期宽度

Inner html div doesn't behave width the expected width

html

javascript

css

reactjs

styled-components