Плавно изменять размер элементов контейнера на загрузочной карусели вместо мгновенного «перехода» к новому размеру ⇐ CSS

[Anonymous]

• Я пытаюсь добиться плавного изменения размера элементов контейнера при просмотре изображений или видеоматериалов различного размера/высоты в карусели начальной загрузки.
  
  сейчас он «перепрыгивает», чтобы изменить размер изображения до следующей высоты, что выглядит не очень красиво и немного коряво.
  Кажется, я не могу этого сделать. заставить его работать. Я пробовал использовать размер %, используя vh vw, я также думал, что есть действие под названием «transiton/ease», которое может помочь, но пока я не могу в этом разобраться. любая помощь приветствуется.
• изменение размера контента в основном нормально, когда изображение/видео более широкое. но если объект изображения/видео высокий, возможно ли пропорциональное изменение его размера или вам придется выбирать одно или другое? высокие изображения прямо сейчас обрезаются, если браузер становится короче, но было бы здорово, если бы более короткий браузер все равно уменьшал масштаб ресурса (без обрезки)

Текущий код:

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

$(document).ready(function() {
function adjustContainerSize() {
$('.responsive-container').each(function() {
var maxWidth = $(this).parent().width();
var maxHeight = $(window).height() * 0.9;  // 90% of viewport height
$(this).css({
'max-width': maxWidth,
'max-height': maxHeight
});
});
}

adjustContainerSize();

$(window).resize(function() {
adjustContainerSize();
});
});

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

body {
background-color: violet;
margin: 0;
/* Reset margin to 0 */
padding: 0;
/* Reset padding to 0 */
}

.container {
background-color: green;
margin-bottom: 50px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}

.slideshow-container {
position: relative;
width: 100%;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
background-color: #b9dbe5;
display: flex;
justify-content: center;
align-items: center;
}

.carousel-item {
text-align: center;
/* Center images horizontally */
}

.slideshow-container img,
.slideshow-container iframe {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

/* Show arrows only on hover */

.slideshow-container:hover .prev,
.slideshow-container:hover .next {
display: block;
}

.prev,
.next {
display: none;
cursor: default;
/* Change cursor to default */
z-index: 1000;
color: silver;
font-weight: bold;
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;
padding: 16px;
border-radius: 0 3px 3px 0;
user-select: none;
text-decoration: none;
/* Remove underline */
}

.prev:hover,
.next:hover {
text-decoration: none;
/* Remove underline */
color: silver;
/* Change color on hover */
}

.prev {
left: 0;
}

.next {
right: 0;
border-radius: 3px 0 0 3px;
}

.prev.disabled,
.next.disabled {
pointer-events: none;
opacity: 0.5;
}

/* Responsive YouTube Video */

.video-container {
position: relative;
width: 90%;
/* Adjust the width as needed */
padding-bottom: 56.25%;
/* 16:9 Aspect Ratio (iframe video) */
overflow: hidden;
margin: auto;
/* Center the video */
background-color: #b1e1af;
/* light green */
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Responsive container dimensions */

.responsive-container {
max-width: 90vw;
max-height: 90vh;
}

/* Media queries for different viewport sizes */

@media (min-width: 768px) {
.responsive-container {
max-width: 750px;
max-height: 600px;
}
}

@media (min-width: 992px) {
.responsive-container {
max-width: 970px;
max-height: 700px;
}
}

@media (min-width: 1200px) {
.responsive-container {
max-width: 1170px;
max-height: 800px;
}
}

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

[img]https://source.unsplash.com/random/1000x600/?cat[/img]

[img]https://source.unsplash.com/random/1000x600/?dog[/img]

[img]https://source.unsplash.com/random/1000x600/?shark[/img]

[img]https://source.unsplash.com/random/900x600/?tree[/img]





https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0





[url=#myCarousel1]❮[/url]
[url=#myCarousel1]❯[/url]







[img]https://source.unsplash.com/random/1000x600/?forest[/img]

[img]https://source.unsplash.com/random/900x600/?mountain[/img]

[img]https://source.unsplash.com/random/900x600/?animal[/img]

[img]https://source.unsplash.com/random/900x600/?building[/img]

[img]https://source.unsplash.com/random/900x600/?car[/img]




[url=#myCarousel2]❮[/url]
[url=#myCarousel2]❯[/url]







[img]https://source.unsplash.com/random/1000x600/?sunset[/img]

[img]https://source.unsplash.com/random/900x600/?sky[/img]

[img]https://source.unsplash.com/random/900x600/?cloud[/img]

[img]https://source.unsplash.com/random/900x600/?moon[/img]





https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0





[url=#myCarousel3]❮[/url]
[url=#myCarousel3]❯[/url]

Подробнее здесь: https://stackoverflow.com/questions/783 ... nstant-jum