css - 当我将高度设置为 % 时，图像滑块会抖动

Question

我有一个图像滑块反应应用程序。如果我以 px 为单位设置图像的高度，则滑块可以正常工作。以 % 为单位设置图像高度对我来说很重要。但是，以 % 为单位设置图像高度会导致滑块下方的 div 抖动。请帮助我如何在不导致下部 div 上下抖动的情况下以 % 为单位设置图像高度。请注意，在 vh 中设置图像高度也可以解决下 div 的抖动问题，但不会在窗口宽度调整大小时调整图像的高度。以 % 为单位设置图像高度会调整图像的高度与窗口宽度调整大小成比例（这就是我想要的），但是当单击下一张/上一张幻灯片时，下部 div 会在几分之一秒内上下晃动。先感谢您。

APP.js
------

import React from 'react'
import styled from 'styled-components'
import './App.css'
import ImageSlider from './ImageSlider'
import { sliderData } from './sliderData'
const App = () => {

  return (
    <AppContainer>
      <ImageSlider slides={sliderData} />
      <div className='app'>
        <p>
          How to use Text Editor
          First, select a text file from your computer, Google Drive, or GMail attachment.
          The file will be displayed in your browser where you can then make any changes or edits.
          After edits are made, press the "Save to Drive" button to save the edited file back to Google Drive.
          Download a copy of the file to your computer or device using the "Download" button.
          How Text Editor works
          Text Editor is a pure Javascript web app. All processing is done locally in your web browser and on your computer.
          This app will open a text file of your choice, letting you make changes and save back them to Google Drive or your computer.
          Text Editor can open all text files types including TXT, CSV, HTML, XML, CSS and JSON as well as code files such as C++, Java, and Python.
          Standard text editor features are supported including syntax highlighting, word wrap, themes, and keyboard shortcuts.
          Keyboard shortcuts are supported; press the "Keyboard" icon in the toolbar to display a list of all keyboard shortcuts.
        </p>
      </div>
    </AppContainer>
  )
}

export default App

const AppContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
`;

ImageSlider.js
--------------

import React, { useState } from 'react';
import './ImageSlider.css'
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';

const ImageSlider = ({ slides }) => {
    const [current, setCurrent] = useState(0);
    const length = slides?.length;

    console.log(slides)

    const nextSlide = () => {
        setCurrent(current === length - 1 ? 0 : current + 1);
    };

    const prevSlide = () => {
        setCurrent(current === 0 ? length - 1 : current - 1);
    };

    if (!Array.isArray(slides) || slides.length <= 0) {
        return null;
    }

    return (
        <div className='slider'>
        {slides?.map((slide, index) => (
            <div className={index === current ? 'slide active' : 'slide'} key={index}>
                {index === current && (
                    <img src={slide?.image} alt='travel image' className='image'/>
                )}
            </div>
            ))}
            {slides?.length > 1 &&
                <>
                    <ArrowBackIosIcon
                        className='left-arrow'
                        onClick={prevSlide}
                        style={{
                            fontSize: 35,
                            color: 'white',
                            backgroundColor: '#111',
                            padding: 12,
                            paddingLeft: 18,
                            paddingRight: 6,
                            borderRadius: 999,
                        }}
                    />
                    <ArrowForwardIosIcon
                        className='right-arrow'
                        onClick={nextSlide}
                        style={{
                            fontSize: 35,
                            color: 'white',
                            backgroundColor: '#111',
                            padding: 12,
                            alignContent: 'center',
                            borderRadius: 999,
                        }}
                    />
                </>
            }
        </div>
    );
};

export default ImageSlider;


sliderData.js
-------------

export const sliderData = [
    {
        id: 0,
        image: 'https://images.unsplash.com/photo-1546768292-fb12f6c92568?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
    },
    {
        id: 1,
        image: 'https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1489&q=80'
    },
    {
        id: 2,
        image: 'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    },
    {
        id: 3,
        image: 'https://images.unsplash.com/photo-1475189778702-5ec9941484ae?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1351&q=80'
    },
    {
        id: 4,
        image: 'https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    }
];

app.css
-------

.app {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

ImageSlider.css
---------------

.slider {
        position: relative;
        width: 100%;
        height: 100%;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        overflow: hidden;
    }

    .image {
        max-width: 100%;
        height: 600px;
        aspect-ratio: 16/9;
        border-radius: 6px;
    }

    .right-arrow {
        position: absolute;
        top: 50%;
        right: 1%;
        font-size: 3rem;
        color: #000;
        z-index: 10;
        cursor: pointer;
        user-select: none;
        opacity: 0.6;
    }

    .left-arrow {
        position: absolute;
        top: 50%;
        left: 1%;
        font-size: 3rem;
        color: #000;
        z-index: 10;
        cursor: pointer;
        user-select: none;
        opacity: 0.6;
    }

    .slide {
        opacity: 0;
        transition: all 1.5s ease;
    }

    .slide.active {
        opacity: 1;
        transition: all 1.5s ease;
        transform: scale(1.05);
}


The problem occurs when I change height: 600px; to for example height: 60%; 

.image {
        max-width: 100%;
        height: 600px;
        aspect-ratio: 16/9;
        border-radius: 6px;
    }

标签： cssreactjs