可変寸法のCSS中央トリミング画像

Question

画像の中央部分をトリミングして表示し、さまざまなサイズの画像で機能させようとしています。

画像を含むdivの固定幅を設定し、overflow：hiddenプロパティを使用して成功しました。これは、画像の一番左の部分のみを表示し、右側が非表示になることを除いて、希望どおりに機能します。

画像の中央部分を表示し、画像の左側と右側を非表示にしたいです

Answer 1

背景画像にするアプローチを採用します

.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}

<div class="imghider">&nbsp;</div>

異なるサイズについては、いくつかのクラスまたはCSS式（またはサーバー側のCSS生成）を使用できます

これが役立つことを願っています。