zoukankan      html  css  js  c++  java
  • 关于图片素材和所需盒子大小不一样的解决

    css关于盒子和图片不一样,如何让图片适合比例且不变形地显示在盒子中

    在读这篇小博客之前,首先要明确一点,我们所需求的盒子是固定大小,不会因为图片的大小改变,这在页面中是很常见的。在我们扒图的时候肯定会存在所需图片与盒子大小不一样的情况。

    盒子为小,图片为大,这是最常见的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片的合适位置</title>
        <style>
            .box{
                 300px;
                height: 300px;
                background:url(images/1.jpg) no-repeat;
                /* 盒子此时绝对很小 */
                background-size:100% 100%;  /*此时图片完全显示在了盒子里但是很模糊,原因没有等比例缩放*/
                /* 可以修改background的百分数或者直接用一个具体的px代替,修改好后通过backgound-position调位置*/
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 图片的大小为2560 x 1100 非常大呀 -->
        </div>
    
        <script>
            
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    TensorRT推理加速基于Tensorflow(keras)的uff格式模型(文件准备)
    pandas_format06
    docker01
    pandas_dataformat03
    pandas_dataformat02
    pandas_series04
    pandas_format05
    pandas_format04
    pandas_dataframe01
    pandas_series03
  • 原文地址:https://www.cnblogs.com/wchjdnh/p/10153438.html
Copyright © 2011-2022 走看看