首页 > 开发 > CSS > 正文

超大banner图片不拉伸一直居中的CSS写法

2020-07-03 13:05:56
字体:
来源:转载
供稿:网友
这篇文章主要为大家详细介绍了超大banner图片不拉伸一直居中的CSS写法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

超大banner图片不拉伸一直居中的CSS写法<html>     <head>         <title>Title-www.cuoxin.com</title>         <style>             .bannerbox {                 width:100%;                 position:relative;                 overflow:hidden;                 height:768px;             }             .banner {                 width:1024px; /*图片宽度*/                 position:absolute;                 left:50%;                 margin-left:-512px; /*图片宽度的一半*/             }         </style>     </head>     <body>         <div class="bannerbox">             <div class="banner">                 <img src="http://4493bz.1985t.com/uploads/allimg/160531/3-160531112220.jpg">             </div>         </div>      </body>     </html>

把上面代码css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小,然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

以上就是超大banner图片不拉伸一直居中的CSS写法的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持错新网。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表