jquery - ユーザーがブラウザのサイズを変更しても歪まないSlick Carouselで固定高さの画像を作成するにはどうすればよいですか?

Question

ユーザーがブラウザのサイズを変更しても画像が歪まない固定の高さを指定するにはどうすればよいですか?

背景画像のように機能させたいのですが、Slick Carousel のように回転させたいと思っています。

何か案は？

Answer 1

カルーセル内の画像のコンテナー (この場合はカルーセル自体) の絶対高さを設定します。

カルーセルのstyle=""タグ内にcssを設定して指定する

<div class="carousel" style="height:300px;">
..
</div>

コンテナーに固定の高さを指定している場合、ブラウザーのサイズが変更されても歪みません。または、カルーセルの周りに境界線があり、オーバーフローさせたくない場合は、次の方法を試してください -

<style>
.carouselContainer {
     overflow:hidden;
}
.carouselContainer img {
     height:300px;
}
</style>

<div class="carouselContainer">
     <img src="link1">
     <img src="link2">
     ...
</div>

コードを提供していないため、実際の例を示すことはできません。しかし、それを行う方法の概念を伝えることができれば幸いです.