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

Question

Я пытался сделать действительно простое слайд-шоу с изображениями, появляющимися справа налево в виде анимации:

let slides = document.querySelectorAll('.img-container');
let l = slides.length;
let i = 0;

setInterval(function(){
i = (i + 1) % l;
	if(i == 0){
		for(let j = l - 1;j != 0;j--){
			slides[j].classList.remove('img-slide');
		}
	} else {
		slides[i].classList.add('img-slide');
	}
}, 3500);

body {
	margin: 0px;
}

.section-1 {
	width: 100%;
	height: calc(100vh - 104.5px);
	overflow: hidden;
	display: flex;
}

.img-container {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	transition: ease 0.7s;
}

.img-container:nth-child(1){
	z-index: 0;
}

.img-container:nth-child(2){
	z-index: 1;
}

.img-container:nth-child(3){
	z-index: 2;
}

.img-container:nth-child(4){
	z-index: 3;
}

.img-container:nth-child(2).img-slide{
	transform: translateX(-100%);
}

.img-container:nth-child(3).img-slide{
	transform: translateX(-200%);
}

.img-container:nth-child(4).img-slide{
	transform: translateX(-300%);
}

			<section class="section-1">
				<div class="img-container">
					<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
				</div>
				<div class="img-container">
					<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
				</div>
				<div class="img-container">
					<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
				</div>
				<div class="img-container">
					<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
				</div>		
			</section>

Эти изображения являются лишь примером, поэтому, конечно, они выглядят растянутыми. Изображения, которые я должен использовать, представляют собой четыре различных изображения в формате png 4000x4000 с прозрачностью, поэтому «img-container» должен быть на 100% тела, а также иметь цвет фона. Секция должна иметь фиксированную высоту. Результат с этими изображениями довольно ужасен, они выглядят немного растянутыми, а на мобильных устройствах некоторые из них обрезаны. Я попытался включить

img {
   width: 100%;
   height: auto;
}

Но в результате все четыре изображения стали меньше и все они появились одновременно в окне просмотра. Как я могу это исправить или где я могу узнать больше об этой топи c?

Answer 1

Для достижения этой цели вы можете использовать Подгонка объекта , object-fit: cover или object-fit: contain для тега изображения

element.style {
    object-fit: cover;
}