css方法让图片锁定高宽比全屏居中(背景和img两种)

第一种是把图片放进父元素bacground里，也就是不用子元素：

.css{
  // 在vue的:style里做更新一定要这么写 /cover
  background: url('../../bg.jpg') no-repeat center center/cover fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

第二种是把图片放在子元素的img里，父元素控制(多用于轮播之类的)

.css{
    display: flex;
    justify-content: center;
    align-items: center;
}
.css img{
    width: 100%;
}

PS:这里注意最好先确定长边，比如父元素高度比较窄，正常情况下高度会超高，所以将宽度设置为100%以此充满父元素，否则会造成两边露出底色

 

PS：vue项目做dom动态更新的时候background-size若要进行动态变更，要集成写在background里，这样才能正常跟随数据刷新