Reactjs 手机上的背景图像没有响应

当使用移动屏幕尺寸时，图像会对图像被剪切的时间做出响应，并且不再响应。 我将显示代码和图像进行澄清

const SignIn = ({ setDisplayScreen }: Props) => (
  <ScreenDiv>
    <ImageContainer>
      <FirstImageDiv />
    </ImageContainer>
    <FormDiv>
      <SignInInput placeholder="Username" />
      <SignInInput placeholder="Password" />
      <SignUpButton
        style={{
          cursor: 'pointer',
        }}
      >
        Sign in
      </SignUpButton>
      <ForgotUserNameParagraph>
        Forgot username or password
      </ForgotUserNameParagraph>
      <SignUpParagraph
        style={{ cursor: 'pointer' }}
        onClick={() => setDisplayScreen('SignUpOptions')}
      >
        Don’t have an account? Sign up
      </SignUpParagraph>
    </FormDiv>
  </ScreenDiv>
);

export default SignIn;

我尝试使用背景大小来控制它变小并且超出div的上下文 我能做些什么才能让它像响应型一样继续正确显示。 有什么css技巧可以用来修复这种情况

import styled from 'styled-components';
import { signin, mobileSignin } from '../../assets/images';
import device from '../../config/device';

const FirstImageDiv = styled.div`
  background-image: url(${signin});
  float: left;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  background-repeat: no-repeat;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  @media ${device.mobileS} {
    background-image: url(${mobileSignin});
    width: 100%;
    height: 34.3vh;
    background-size: cover;
    justify-content: flex-end;
  }
`;
export default FirstImageDiv;