响应式示例， 图片自然放大缩小

总结下响应式该如何处理。
一、有图片时图片直接设置 width 100%； 关键点：如果是Flex布局中是要用好flex属性， 如果它是1， 那图片就会占满当前的容器，随容器大小来变化。Grid 布局用的少，直接的width 100%貌似也可以。
二、图片可以加上minWidth 属性来控制最小显示时该占有的宽度。
三、有二维的布局时要考虑使用Grid， 即两行两行或以上的情况。
四、Flex 布局当图片src地址失效后是不占宽高的， 但Grid布局占高宽，看下图

image.png

使用chakra-ui 的 demo， 代码如下：
index.jsx:

import {
  Box,
  Flex,
  Image,
  Text,
  Grid,
  GridItem,
  useBreakpointValue,
} from '@chakra-ui/react';
import { Eyebrow, Headline, CTAButton } from './index.styles';
const Demo = ({
  eyebrow,
  headline,
  body,
  CTA1,
  CTA2,
  largeImgSrc,
  largeImgAlt,
  smallImages,
  bgcolor,
}) => {
  const layout = useBreakpointValue({
    base: 'column',
    md: bgcolor ? (largeImgSrc ? 'column' : 'row') : 'row',
    lg: 'row',
  });

  return (
    <Flex
      direction={layout}
      justify={'center'}
      align={'center'}
      backgroundColor={bgcolor}
      p={bgcolor ? '20px' : 0}
      borderRadius={{ base: '4px', lg: '8px' }}
      id="collageComponentWrap"
      gap={'12px'}
    >
      <Box
        id="firstSection"
        w={'100%'}
        alignSelf={{ md: !largeImgSrc ? 'center' : 'flex-start', lg: 'center' }}
        flex={{ base: 1, md: 1 }}
      >
        <Flex
          width={{ base: '100%' }}
          display="column"
          justifyContent="center"
          align={'left'}
          pt="12px"
          id="collageTextSection"
        >
          {eyebrow && largeImgSrc && (
            <Eyebrow id="eyebrow" fontSize={bgcolor ? '18px' : '16px'}>
              {eyebrow}
            </Eyebrow>
          )}
          {headline && (
            <Headline
              id="headline"
              fontSize={!largeImgSrc ? '32px' : '24px'}
              fontWeight={!largeImgSrc ? 900 : 400}
            >
              {headline}
            </Headline>
          )}
          {body && <Text id="bodyText">{body}</Text>}
        </Flex>
        <Flex my={'12px'} dir="row" justify={'flex-start'} gap={'12px'} flexWrap={'wrap'}>
          {CTA1?.label && (
            <CTAButton
              as="a"
              href={CTA1?.href}
              id="CTA1"
              color={CTA1?.color || 'inherit'}
              borderColor={CTA1?.borderColor}
            >
              {CTA1?.label}
            </CTAButton>
          )}
          {CTA2?.label && (
            <CTAButton
              as="a"
              href={CTA2?.href}
              id="CTA2"
              color={CTA2?.color || 'inherit'}
              borderColor={CTA2?.borderColor}
            >
              {CTA2?.label}
            </CTAButton>
          )}
        </Flex>
      </Box>
      <Flex
        id="collageImageSection"
        direction={{ base: 'column', md: 'row' }}
        width={{ base: '100%' }}
        gap={'20px'}
        justify={{ base: 'center', md: 'flex-start' }}
        align={{ base: 'center' }}
        flex={{ base: 2, md: largeImgSrc ? 2 : 1, lg: 2 }}
      >
        {largeImgSrc && (
          <Box id="bigImage" flex={1} w={'100%'}>
            <Image
              src={largeImgSrc}
              alt={largeImgAlt}
              borderRadius={'8px'}
              objectFit={'cover'}
              width={'100%'}
              minWidth={'196px'}
            />
          </Box>
        )}
        <Grid
          id="smallImagesGroup"
          templateRows={{
            base: 'repeat(2, 1fr)',
            lg: largeImgSrc ? 'repeat(2, 1fr)' : 'unset',
          }}
          templateColumns={{
            base: 'repeat(2, 1fr)',
            lg: largeImgSrc ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          }}
          gap={4}
          flex={1}
          w={'100%'}
        >
          {smallImages?.map((img, index) => (
            <GridItem key={index}>
              <Image
                src={img.src}
                alt={img.alt}
                key={index}
                width={'100%'}
                // maxWidth={'205px'}
                minWidth={'89px'}
              />
            </GridItem>
          ))}
        </Grid>
      </Flex>
    </Flex>
  );
};
export default Demo;

index.styles.js

import { Box, Button } from '@chakra-ui/react';
import styled from '@emotion/styled';

export const Eyebrow = styled(Box)`
  font-weight: 700;
`;

export const Headline = styled(Box)`
  font-family: Gelica;
  font-size: ${(props) => props?.fontSize || 'inherit'};
  line-height: 120%;
`;

export const CTAButton = styled(Button)`
  border-radius: 28px;
  min-width: 52px;
  border: 2px solid #1c1c1c;
  background: #fff;
  padding: 12px 20px;
  border-color: ${(props) => props?.borderColor || 'inherit'};
`;

推荐一篇 Flex布局的技术文章，可以交互直接看效果，链接：An Interactive Guide to Flexbox. 这些东西都是打基础，了解后直接干就好