• 大图居中的两种写法


    现在网站,首页banner一般是大图,由于要兼容台式机高分辨率,都会使用1600px或者1920px的图片。

    但这些大图在小屏幕下的显示,会让人有点头疼。

    网上搜了很多,复制的,拷贝的,都没几个自己写自己测试过的。now,看过来,下面两种做法可以解决你的难言之隐~ 哈哈~

    方法一:最简洁,利用background  50%

    <html>
    <body>
    <style>

    .banner {
    height: 339px;
    background: #d8d9de url(banner2.jpg) no-repeat 50% 0;
    }
    </style>

    <section id="home_banner" class="banner"></section>

    </body>
    </html>

    方法二:有时必须用img标签的情况

    .dd{
    margin: 0 auto;
    position:relative;
    overflow:hidden;
    }
    .mm{
    position:absolute;
    left:50%;
    1920px;
    }
    .ff{
    position:absolute;
    left:-50%;
    }

      这个涉及到数学上的转换,大家自己思考了。我这也是拾取他人牙慧,经自己琢磨改写的。效果很不错,推荐~

    1、以专家为榜样,不必自己重新探索
    2、解构技能,找出实现80%效果的那20%
    3、不要一心二用
    4、练习练习再练习!然后获得即时反馈
    5、坚持,不要在低谷期放弃
  • 相关阅读:
    决定迁移过来,深耕于此。。。
    一篇搞定MongoDB
    一篇搞定vue请求和跨域
    自定义全局组件
    一篇搞定vue-router
    一篇搞定Vuex
    vue系列
    .Vue.js大全
    一篇搞定spring Jpa操作数据库
    自定义admin
  • 原文地址:https://www.cnblogs.com/zhongyuan/p/3613857.html
Copyright © 2020-2023  润新知