zoukankan      html  css  js  c++  java
  • 大图居中的两种写法

    现在网站,首页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、坚持,不要在低谷期放弃
  • 相关阅读:
    CenterNet-TensorRT错误记录
    NAS研究要点分析
    conda如何安装从源下载的离线安装包
    Xavier上pytorch半精度inference问题
    Xavier 使用便携程序
    Xavier疑问
    Python输入(Leetcode
    兴趣爱好
    生活目标
    TX2装机教程
  • 原文地址:https://www.cnblogs.com/zhongyuan/p/3613857.html
Copyright © 2011-2022 走看看