画像があり、特定の幅と高さ（ピクセル単位）を設定したい
しかし、CSS( width:150px; height:100px) を使用して幅と高さを設定すると、画像が引き伸ばされ、見苦しくなる可能性があります。
CSS を使用して画像を拡大せずに特定のサイズに埋める方法は?
画像の塗りつぶしと伸縮の例:
オリジナル画像:
引き伸ばされた画像:
塗りつぶされた画像:
上記の塗りつぶし画像の例では、最初に画像が 150x255 (アスペクト比を維持) にサイズ変更され、次に150x100 にトリミングされていることに注意してください。
ベストアンサー1
CSSプロパティを使用することができますobject-fit（「やなどの置換要素のコンテンツを、そのコンテナーに合わせてどのようにサイズ変更するかを設定します。」）<img><video>
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}<img src="https://i.sstatic.net/2OrtT.jpg" class="cover" width="242" height="363" />IE 用のポリフィルがあります:https://github.com/anselmh/object-fit
関連している： object-position (ボックス内の要素の内容の配置を指定します。)