如何将这些图像单独放置在屏幕上的设计上，以实现响应式设计

Question

我有这个项目，我一直在使用样式化组件进行反应，但我在将它们放在应该的位置时遇到了问题，尝试了包含所有叶子的单个图像以及图像查询最大宽度，现在我没有想法了

叶子不符合图像尺寸，导致它们覆盖了所有错误的地方

import React from 'react';
    import { Swiper, SwiperSlide } from 'swiper/react';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import './styles.css';
    import Image from '../assets/HomeSection.png';
    import { Navigation } from 'swiper/modules';
    import styled from 'styled-components';
    import FolhasImg from '../assets/folhas1.png';
    import FolhaEsquerda from '../assets/FolhaEsquerda.png';
    const InnerCarousel = styled.div`
        display: flex; // Use flexbox to center the image
        justify-content: center; // Center horizontally
        align-items: center; // Center vertically
        height: 110vh; // Make sure the card takes the full height of the viewport
        overflow-x: hidden;
    `;
    const Texts = styled.div`
        padding: 4em;
        max-width: 30vw;
    `;
    const Images = styled.img`
        min-width: 10vw;
        max-width: 60vw;
        min-height: 10vh;
        max-height: 60vh;
        border-radius: 60px;
        `;
    const H1 = styled.h1`
        font-size: 36px;
        font-family: 'Montserrat', sans-serif;
        `;
    const Paragraph = styled.p`
        font-size: 16px;
        color: black;
        font-family: 'Mont-serrat', sans-serif;
        max-width: 30vw;
        word-break: break-all;
        `;
    
    const Folhas = styled.div`
        pointer-events: none;
        z-index: 10;
        position: absolute;
        overflow-x: hidden;
    `;
    const FolhasImagem = styled.img`
        
        pointer-events: none;
    `;
    export default function CarouselHome() {
      return (
        <>
       
        <Folhas  style={{ alignSelf: 'end', height: '100vh'}}><FolhasImagem src={FolhaEsquerda} style={{ alignSelf: 'end'}} /></Folhas> 
          <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
            <SwiperSlide style={{ height: '80vh' }}>
                    <InnerCarousel>
                        <Texts>
                            <H1>eCO Funding</H1>
                            <Paragraph>ParagraphParagraphParagraphParagraphParagrapParagraphParagraphParagraphParagraphParagraph </Paragraph>
                        </Texts>
                        <Images src={Image} alt="carousel" />
                    </InnerCarousel>
                </SwiperSlide>
            <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>Header</H1>
                        <Paragraph>Paragraph</Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
            </SwiperSlide>
            <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>Header</H1>
                        <Paragraph>Paragraph</Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
            </SwiperSlide>
            <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>Header</H1>
                        <Paragraph>Paragraph</Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
            </SwiperSlide>
            <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>Header</H1>
                        <Paragraph>Paragraph</Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
            </SwiperSlide>
            <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>Header</H1>
                        <Paragraph>Paragraph</Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
            </SwiperSlide>
          </Swiper>
            
        </>
      );
    }

Answer 1

正如其他人所说，您需要使用 StackOverflow 编辑器或至少在 JS fiddle 中重新创建您的问题，以便我们可以看到您所拥有的内容并告诉您修复它。

基本上，图像需要相对于最近的元素放置，以便当该元素移动时图像也会移动。例如，位于带有豹子（？）的圆形图像顶部的两片叶子需要位于带有该动物图像的容器中。然后它们可以相对于该图像定位。我在下面创建了一个示例。使用这个，它应该会激发关于如何放置其余图像的想法。

.image-container {
  background: #406053;
  display: block;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  position: relative;
  margin: 3rem 0 0 3rem;
}

.leaf-1 {
  background: #4B801E;
  width: 100px;
  height: 40px;
  position: absolute;
  right: -20px;
  bottom: -10px;
  transform: rotate(-30deg);
  filter: blur(10px);
}

.leaf-2 {
  background: #4B801E;
  width: 100px;
  height: 40px;
  position: absolute;
  left: -20px;
  top: -10px;
  transform: rotate(30deg);
}

<div class="image-container">
  <div class="leaf-1"></div>
  <div class="leaf-2"></div>
  <div class="animal"></div>
</div>