I've been struggling with getting my images to resize when switching to mobile etc. everything is fine when in desktop mode, images look fine.
However, when I reduce the page size the image distorts as if it is being pushed from either side, just wondering if there is something I could look at or do to fix this?
I've managed thus far but I keep running into the same issue. Cheers!
import React from "react";import { slides } from "../constants";import { useState } from "react";import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from "react-icons/fa";const Carousel = () => { const [current, setCurrent] = useState(0); const length = slides.length; 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 (<section className="slider"><FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide}/><FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} /> {slides.map((slide, index) => { return (<div className={index === current ? 'slide active' : 'slide'} key={index}> {index === current && ( <img src={slide.image} alt={slide.alt} className="image"/>)}</div> ) })}</section> );};export default Carousel;I've tried inputting flex adjustments, but I'm not sure I'm putting them in the right place, the index.css file for this section currently looks like as follows:
.slider { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center;}.image{ width: relative; height: 600px; border-radius: 10px;}.right-arrow{ position: absolute; top: 50%; right: 32px; font-size: 3rem; color: #57DEE4; z-index: 10; cursor: pointer; user-select: none;}.left-arrow{ position: absolute; top: 50%; left: 32px; font-size: 3rem; color: #57DEE4; z-index: 10; cursor: pointer; user-select: none;}