解决banner图在浏览器缩放的情况下实现不变形

最新推荐文章于 2022-11-27 22:22:02 发布

努力让自己的选择变得正确

最新推荐文章于 2022-11-27 22:22:02 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签：解决banner图在浏览器缩放下变形问题

前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

html代码：

<div class='bannerbox'>
  <div class='banner'>
      <img src="../assets/01.jpeg">
   </div>
</div>
<style>
    .bannerbox { 
        width:100%; 
        position:relative; 
        overflow:hidden; 
        height:500px;
      } 
      .banner { 
           width:1920px;/*图片宽度*/ 
           position:absolute; 
           left:50%; 
           margin-left:-960px;/*图片宽度的一半*/
        }
</style>