横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。
そんな時、サイズは大きなまま画像の全体を表示するために、アニメーションをつけてみたのが、今回のサンプルです。
横幅を固定し、内部の背景画像の位置を左右に移動しています。
.demo_img{ background-image: url(https://www.kipure.com/img/demo/cat/003.jpg); background-repeat: no-repeat; background-position: 0px 0px; background-size: auto 300px; width: 300px; height: 400px; animation: act_anime 10s infinite alternate linear; } @keyframes act_anime { 0% { background-position: -150px 0px; } 100% { background-position: 0px 0px; } }