首页 > 其他分享 >动态展示缩放背景图

动态展示缩放背景图

时间:2023-09-26 20:44:20浏览次数:36  
标签:展示 border 缩放 height width 背景图 图片

           有时候在渲染用户上传的图片时,需要根据不同图片宽高进行展示 ,若固定宽高,则会对图片一定程度的拉伸,导致图片变形,此时直接根据relation  相对位置,使图片的框和背景框动态缩放, 宽则同宽,长则同长, 直接上效果图

                   

 

        .srcbox-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 225px;
            height: auto;
            padding: 4px;
            margin: -30px 0 10px 70px;
            position:relative;
        }

        .imgcss-img {
            width: 215px;
            height: auto;
        }

 

                    <div class="col-sm-4">
                        <div>

                            <div>
                                <label class="control-label required" style="display: inline;">弹框图片</label>
                            </div>
                            <div class="srcbox-img" style="margin-top: 10px; margin-left: -1px">
                                <img id="ImgId-img" class="imgcss-img" />
                            </div>
                            <small style="margin-left:0px;">图片类型说明: (png、jpg、bmp)</small><br>
                            <small style="margin-left:0px;">图片建议说明</small>
                        </div>
                    </div>

 

标签:展示,border,缩放,height,width,背景图,图片
From: https://www.cnblogs.com/Sientuo/p/17731086.html

相关文章

  • 老师的叮组——团队展示
    队名老师的叮组项目描述图书管理系统队员风采成员1学号2023021879成员姓名暗号成员的博客地址https://www.cnblogs.com/viperr/成员性格沉着冷静有团队精神擅长的技术JAVA兴趣爱好听歌希望的软工角色后端一句话宣言与其临渊羡鱼不如退而结网成员2学号20......
  • 修改java项目启动后在jps展示的名称
    问题在服务器上启动jar包的时候,通过jps查看java进程只展示个jar解决,指定jar包的全路径java-jar/root/test/aaa.jarjps查看494976aaa.jarmaven打包修改jar名称修改build下的finalName即可:<build><finalName>springboot-yida-aaa</finalName></build>......
  • 豪情在天组——团队展示
    一、团队名:豪情在天组二、拟项目描述豪情在天教务管理系统三、团队成员风采成员一:学号:2023021820昵称:llj175博客园地址:https://www.cnblogs.com/llj175/成员性格:乐观,热情擅长技术:前端兴趣爱好:乒乓球,羽毛球希望的软工角色:前端宣言:害怕什么就是豪!成员二:学号:2023021856......
  • 威虎山五大金刚——团队展示
    队名:威虎山五金刚团队项目描述:一个xx的管理系统,增加翻译功能,可以添加标签,图片等队员风采:第一位队员:学号:2023021873姓名:敖成 (图中左一)博客园地址:https://home.cnblogs.com/u/ac020821擅长的技术:js、html兴趣爱好:篮球、音乐希望的软工角色:前端宣言:好好学习、天天向上 第二位......
  • 乐指猿——团队展示
    队伍名字:乐指猿团队项目:觅食闪送项目介绍:这个项目(觅食闪送)是专为餐饮企业(如餐厅和饭店)度身定制的软件产品,包括两个主要部分:管理后台和小程序应用。管理后台主要为餐饮企业内部员工提供支持。它允许管理员有效地管理和维护餐厅的各项事务,包括菜品、套餐、订单、员工等,并提供了......
  • 基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单
    大学生汉服租赁网站一、前言二、我的优势2.1自己的网站2.2自己的小程序(小蔡coding)2.3有保障的售后2.4福利三、开发环境与技术3.1MySQL数据库3.2Vue前端技术3.3SpringBoot框架3.4微信小程序四、功能设计4.1主要功能描述五、系统实现5.1前端实现5.1.1汉服租赁5.1.2汉服......
  • 时间轴组件,数据展示为卡片形式
    ```javascriptimportReact,{useState}from'react';importstylesfrom'@/styles/portrait/TrafficAdministrativeCases.module.less'constLeft:React.FC=({})=>{return(<divclassName={styles.left}><divclass......
  • 4味地黄丸--团队展示
    队名:4味地黄丸;队员风采:1、学号:2023021841昵称:张秀炎博客网址https://www.cnblogs.com/asdft/性格:闷骚擅长:画图兴趣爱好:游泳,LOL希望的软工角色:前端宣言:我们能做的,比想象的更多2、学号:2023021821昵称:GEM.kkt成员的博客园地址:https://www.cnblogs.com/arkkkt/性格:平静......
  • 利用jQuery实现表格或者区域内数据的滚动展示效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • 汪汪队不开会——团队展示01
    队名汪汪队不开会团队项目介绍小区停车位分配与管理系统队员介绍队员1:学号:2023021863姓名:苏帅博客园地址:https://www.cnblogs.com/AipzzzX性格:谨慎冷静擅长的技术:Linux、JavaScript、Vue兴趣爱好:编程希望的软工角色:前端或者运维一句话宣言:生当作人杰,死亦为鬼雄队......