기술나눔

vue中,图片在div中按照图片原来大小等比例显示

2024-07-12

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

图片在div中按照图片原来大小等比例显示,可以保证web上显示的图片和实际图片形状一样,保留原始图片效果

实现代码如下:

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

效果如下: