zoukankan      html  css  js  c++  java
  • 图片加载防止窗口抖动,又可以等比例缩放

    由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.
    如果固定死高度的话,又不能于宽等比例缩放。
     
    解决办法:
    已知原图的宽高比例
    例如:此图宽500,高321,高/宽为64.2%
    方法一:
    不考虑兼容性(即手机端开发):
    直接设置height: 64.2vw;,意思是高度设置为视窗宽度的64.2%
    <style>
    .img-content{
    width: 100%;
    height: 64.2vw;
    overflow: hidden;
    }
    img{
    width: 100%;
    }
    </style>
    </head>
    <body>
    <div class="img-content">
    <img src="./hai.jpg" alt="">
    </div>
    <div>text</div>
    </body>
     
    方法二
    .img-content{
     100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 64.2%;
    }
    img{
     100%;
    }
    </style>
    </head>
    <body>
    <div class="img-content">
    <img src="./hai.jpg" alt="">
    </div>
    <div>text</div>
    </body>

    由于padding的大小是根据父级元素的宽来规定大小,所以上面设置padding-bottom为64.5%是相对于整个body宽度(100%),又因为默认box-sizing为content-box,所以宽高是元素本身的宽高,设置了高度为零,高度就由padding-bottom撑开。

    题外:

    由第二种方法可以联想到我们要做一个正方形,要怎么实现

      30%;padding-top: 30%;height: 0;
    width的比例等于padding-top的比例即可
     
     
  • 相关阅读:
    用例失败重新运行
    pytest启动浏览器,失败用例截图
    解决pycharm问题:module 'pip' has no attribute 'main'
    pytest的HTML
    pytest 的 yield
    pytest的setup和teardown
    pytest的fixture和conftest
    pycharm运行pytest
    简单易用的MongoDB
    快速入门系列--CLR--02多线程
  • 原文地址:https://www.cnblogs.com/echo-hui/p/9427396.html
Copyright © 2011-2022 走看看