Почему в слайдере показывает криво изоражение?

Question

[fax1k3]

На одной странице показывает нормально, а на этой плохо

<section class="container">
            <div class="slider-wrapper">
                <div class="slider">
                    <img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" />
                    <img id="slide-2" src="img/лес.png" alt="Aokigahara" />
                </div>
                <div class="slider-nav">
                    <a href="#slide-1"></a>
                    <a href="#slide-2"></a>
            </div>
        </section>

body {
	background-color: #f8fafc00;
}

.container {
	padding: 0px;
}

.slider-wrapper {
	position: relative;
	top: 200px;
	max-width: 786px;
	margin: 0;
}

.slider {
	display: flex;
	aspect-ratio: 16/9;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
	border-radius: 8px;
}

.slider::-webkit-scrollbar {
	display: none;
}

.slider img {
	width: 100%;
	scroll-snap-align: start;
	object-fit: cover;
}


.slider-nav {
	display: flex;
	column-gap: 16px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.slider-nav a {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #000000;
	opacity: 1;
	transition: opacity ease 500ms;
}

.slider-nav a:hover {
	opacity: 1;
	background-color: #464545;
}

Comments

[szQocks]

сделай демонстрацию, иначе как ответить на твой вопрос, если я например - не вижу картинки там в помине, потому что она у тебя локально на твоём компе, от того что ты указал пути к ней в коде в вопросе, она у меня перед глазами не отобразиться

Answer 1

[Андрей]

Точно я вам сказать не могу, но проверьте:
Размер изображений.
Убедитесь, что все изображения имеют одинаковый размер и соотношение сторон, чтобы они хорошо вписывались в слайдер.

Атрибуты изображений.
Убедитесь, что атрибуты width и height установлены в соответствующие значения для каждого изображения. Например:

<img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" width="786" height="442" />

Кэширование изображений.
Изменения в изображениях могут не отображаться из-за кэширования. Попробуйте очистить кэш браузера или обновить страницу, можно использовать сочетание клавиш Ctrl + F5.

Пути к изображениям.
Проверьте, что пути к изображениям (src атрибуты) указаны правильно и ведут к нужным изображениям.