Как заставить контейнерные элементы div на загрузочной карусели плавно изменять размер, а не «перепрыгивать» на новый ра ⇐ CSS

[Anonymous]

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

Multiple Responsive Slideshows



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;
}
}




















https://player.vimeo.com/video/14337437 ... portrait=0





❮
❯




















❮
❯



















https://player.vimeo.com/video/14337437 ... portrait=0





❮
❯










$(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();
});
});






Подробнее здесь: https://stackoverflow.com/questions/783 ... ot-jump-to