reactjs - 背景图片在手机上没有响应

Question

在移动屏幕尺寸上，图像会响应图像被剪切且不再响应的时间。我将显示代码和图像以进行澄清。

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;

图像分量

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; 

我尝试使用背景大小包含它变得很小并且超出了 div 的上下文我该怎么做才能继续像响应式一样正确显示。可以使用哪些 css 技巧来解决这种情况？

标签： reactjsstyled-components