大家在做项目的时候有没有遇到一个问题呢 就是一张图片宽度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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 开箱你的 AI 语音女友「GitHub 热点速览」
· 前端实现 HTML 网页转 PDF 并导出
· 特斯拉CEO埃隆.马斯克的五步工作法,怎么提高工程效率加速产品开发?