首页 前端知识 HTML里的图片高度固定,宽度自适应

HTML里的图片高度固定,宽度自适应

2024-02-16 14:02:29 前端知识 前端哥 221 572 我要收藏

需求:图片的高度固定,宽度需自适应,保证图片在缩小的情况下不失帧

效果图:

 

 1.HTML

 <div class="img" 
      :style="{backgroundImage:'url('+item.chainImage+')',backgroundSize:'contain',
      backgroundRepeat:'no-repeat'}">
</div>

注:background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比),是图片宽高最长的那个边覆盖元素一边即可; 

2.CSS

 .img {
        height: 22px;
      }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2142.html
标签
评论
发布的文章

vue-echarts实现多功能图表

2024-03-02 09:03:54

echarts参数详细介绍

2024-03-02 09:03:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!