CSSでサイズ変更およびトリミングされた画像を表示する
サイズ比が異なっていても、特定の幅と高さのURLから画像を表示したい。したがって、サイズを変更し(比率を維持)、画像を希望のサイズにカットします。 私はhtml imgプロパティでサイズを変更でき、でカットできbackground-imageます。 どうすれば両方できますか? 例: この画像: サイズが800x600ピクセルで、200x100ピクセルのイメージのように表示したい img私は画像のサイズを変更することができます200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> それは私にこれを与えます: <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> コードスニペットを実行する結果を非表示スニペットを展開 とbackground-image私は画像の200x100ピクセルをカットすることができます。 <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> くれます: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> コードスニペットを実行する結果を非表示スニペットを展開 どうすれば両方できますか? 画像のサイズを変更して、必要なサイズにカットしますか?