Как мне остановить бесконечное расширение изображения слайдера и его размещение в контейнере? ⇐ CSS

[Anonymous]

Я пытаюсь создать слайдер/карусель изображений внутри коробки. У меня карусель работает, но изображение слишком маленькое. Всякий раз, когда ширина регулируется (или задана бесконечность), изображение просто постоянно расширяется до места, где есть только пятно от увеличенной части изображения, и/или горизонтальная прокрутка практически бесконечна.
Компонент ImageSlider:

Код: Выделить всё

const SliderContainer = styled.div`
width: 50%;
.slick-slide img {
display: block;
width: 100%;
height: auto;
margin: auto;
border-radius: 8px;
`;

const StyledSlider = styled(Slider)`
width: 100%;

.slick-prev, .slick-next {
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.slick-prev {
left: 10px;
}

.slick-next {
right: 10px;
}

.slick-dots {
bottom: -30px;
}
`;

const ImageSlider = ({ images }) => {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
pauseOnHover: true,
};

return (


{images.map((image, index) => (

[img]{image.src} alt={image.alt} /[/img]

))}


);
};

Код веб-страницы:

Код: Выделить всё

import React from 'react';
import styled from 'styled-components';
import Box from '../components/Box';
import ImageSlider from '../components/ImageSlider';
import image1 from '../assets/images/aboutimage1.jpg';
import image2 from '../assets/images/aboutimage2.jpg';
import helpImage from '../assets/images/hair-wash.jpg';
import customerImage from '../assets/images/helping-customer.jpg';
import stylesImage from '../assets/images/styles.jpg';

const AboutContainer = styled.div`
padding: 6rem 2rem 2rem 2rem;
max-width: 1200px;
margin: 0 auto;
background-color: #f8f8f8;
`;

const TopSection = styled.div`
display: flex;
gap: 1rem;
margin-bottom: 2rem;
`;

const OpeningTimesBox = styled(Box)`
flex: 1;
`;

const SliderBox = styled(Box)`
flex: 2;
position: relative; /* Ensures it respects the container */
`;

const BottomSection = styled.div`
display: flex;
flex-wrap: wrap;
gap: 1rem;
`;

const ContentBox = styled(Box)`
flex: 1;
`;

const About = () => {
const images = [
{ src: image1, alt: 'Slide 1' },
{ src: image2, alt: 'Slide 2' },
];

return (



Open Six Days A Week Except For Bank Holidays
Mon-Fri: 9am - 5:30pm
Sat: 8am - 5pm
Sun: Closed
OAP Rates Monday to Thursday
No Appointment Needed

Я настроил отображение и высоту/ширину, чтобы попробовать различные комбинации, но изображение либо становится слишком маленьким, разрезается пополам, либо расширяется. Всякий раз, когда значения ширины настраиваются, они должны составлять 50 %, иначе они просто расширяются бесконечно.

Подробнее здесь: https://stackoverflow.com/questions/787 ... -fit-the-c