滑らかなカルーセルを使用しているときに不要な画像のオーバーフローが発生します

Question

初めての発信者、長時間のリスナー。

私はこの滑らかなカルーセルに自分の写真を収めようとしていますが、垂直部分は常に境界の外に出ています。理想的には、写真をカルーセルセクション（カバー）に塗りつぶし、画面サイズの変更に応じてサイズを調整したいと思っています。

私はコーディングに新しいですし、多くを試しました。任意の助けをいただければ幸いです

https://codepen.io/jerimijones/pen/WXvBMX

#carousel { 
    width: 70%; 
    height: 90%; 
    position: absolute; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%, -20%); 
    border-color: white; 
    border-style: solid;} 

https://carouseltest.netlify.com/

：ここで私は今午前サイトへのリンクです。

Answer 1

CSS Image size, how to fill, not stretch?

---

の可能性のある重複あなたはCSSプロパティobject-fitを使用することができます。

.cover { 
    object-fit: cover; 
    width: 50px; 
    height: 100px; 
} 

See example here

IE用ポリフィルがあります：https://github.com/anselmh/object-fit