技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

画像は画像の元のサイズに比例して div に表示されるため、Web 上に表示される画像は実際の画像と同じ形状になり、元の画像効果が保持されます。

実装コードは次のとおりです。

<div style="padding: 0; width:400px;height:400px;position: absolute;border: 1px solid #eff2f6;">
   <img :src="imgOptions.img" style="width: 100%;height:100%;object-fit: contain;"/>
</div>

効果は次のとおりです。