liAnran

博客园 首页 新随笔 联系 订阅 管理
  60 随笔 :: 0 文章 :: 6 评论 :: 17万 阅读

大家在做项目的时候有没有遇到一个问题呢    就是一张图片宽度100%    在缩放屏幕的时候图片会被压缩变形!!!那么怎么才能实现图片始终居中而不被压缩变形呢?  接下来让我带领大家解决这个问题   请看代码↓↓↓↓↓↓↓

<div class='bannerbox'>
  <div class='banner'>
      <img src="../assets/01.jpeg">
   </div>
</div>

下面是css:

复制代码
.bannerbox { 

                  width:100%; 

                  position:relative; 

                  overflow:hidden; 

                  height:500px;

             } 

          .banner { 

                 width:1920px;/*图片宽度*/ 

                 position:absolute; 

                 left:50%; 

                 margin-left:-960px;/*图片宽度的一半*/

  }
复制代码

摘自:https://www.cnblogs.com/chenchenhao/p/9889628.html

posted on   liAnran  阅读(682)  评论(0编辑  收藏  举报
编辑推荐:
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
阅读排行:
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 开箱你的 AI 语音女友「GitHub 热点速览」
· 前端实现 HTML 网页转 PDF 并导出
· 特斯拉CEO埃隆.马斯克的五步工作法,怎么提高工程效率加速产品开发?
点击右上角即可分享
微信分享提示