前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

这篇具有很好参考价值的文章主要介绍了前端使用scale属性结合CSS动态样式实现动态的图片缩放效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

废话不多说,直接上代码:

示例一,使用css动态样式结合scale进行src图片的缩放。

//结构层,使用动态属性配合计算属性来实现动态样式
 <img  :src="selectedItem.url" alt="" :style="elementStyle(item)" >
//在计算属性中,使用return(item)来接收从结构层中传递的相关宽高值
computed: {
    elementStyle() {
      return (item) => {
        //注意此处1038以及518是设定的父容器的盒子大小                                                    
        const scale_x = 1038 / this.selectedItem.width;                                              
        const scale_y = 518 / this.selectedItem.height;
        const scale = scale_x < scale_y ? scale_x : scale_y;
        const rect_width = scale * this.selectedItem.width;
        const rect_height = scale * this.selectedItem.height;
        // const background_size_x = scale * this.selectedItem.width;
        // const background_size_y = scale * this.selectedItem.height;
        // const background_position_x = scale * this.selectedItem.width;
        // const background_position_y = scale * this.selectedItem.height;

        return {
          // backgroundSize: `${background_size_x}px ${background_size_y}px`,
          // backgroundPosition: `${background_position_x}px ${background_position_y}px`,
          width: `${rect_width}px`,
          height: `${rect_height}px`
        };
      }
    }
  },

示例二,使用css动态样式结合scale进行background背景图图片的缩放。文章来源地址https://www.toymoban.com/news/detail-791477.html

 <!-- 通过背景图方式展示图片 -->
   <div :style=getelementStyle(item)></div>
//在计算属性中
 getelementStyle() {
      return (item) => {
     //注意此处188以及108是设定的父容器的盒子大小     
        const scale_x = 188 / item.width;
        const scale_y = 108 / item.height;
        const scale = scale_x < scale_y ? scale_x : scale_y;
        const rect_width = scale * item.width;
        const rect_height = scale * item.height;
        const background_size_x = scale * item.width;//此处width为整张背景图的宽度
        const background_size_y = scale * item.height;//此处height为整张背景图的高度
        const background_position_x = scale * item.x;//x为已知坐标值
        const background_position_y = scale * item.y;//y为已知坐标值

        return {
          backgroundSize: `${background_size_x}px ${background_size_y}px`,
          backgroundPosition: `${background_position_x}px ${background_position_y}px`,
          width: `${rect_width}px`,
          height: `${rect_height}px`,
          backgroundImage: `url(${item.url})`
        };
      };
    },

到了这里,关于前端使用scale属性结合CSS动态样式实现动态的图片缩放效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3如何实现雷达扫描图(动态样式)

    动态样式控制雷达扫描和暂停: 创建一个 雷达动画效果 ,具体解释如下: 1.首先定义了一个名为.radar的类,设置了其背景为径向渐变,包括四个部分:中心渐变、重复径向渐变、线性渐变和另一个线性渐变。同时设置了宽度、高度、最大宽度、最大高度、位置(相对定位)

    2024年04月09日
    浏览(38)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(54)
  • 前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

    提示: 以下是本篇文章正文内容,主要描述 使用 css/less 动态更换主题色(换肤功能) 提示: 使用 css/less 动态更换主题色(换肤功能), 方法共通,不限制技术栈: 其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求,这时候就需

    2024年02月15日
    浏览(61)
  • CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透

    一、什么是scoped 在vue文件中的style标签上,有一个特殊的属性:scoped。 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识,给组件中的每个标签对应的d

    2024年04月10日
    浏览(50)
  • 前端使用css去除input框的默认样式

    2024年01月23日
    浏览(60)
  • CSS 也能实现 if 判断?实现动态高度下的不同样式展现

    最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标

    2024年02月05日
    浏览(38)
  • CSS 常用样式 之字体属性

    font-weight(字体粗细) 字体粗细用于设置文本的粗细程度,可以使用如下的值: normal:正常字体(默认) bold:加粗字体 bolder:更加加粗 lighter:更加细 代码实例如下: font-style(字体风格) 字体风格用于设置文本的风格,可以使用如下的值: normal:正常字体(默认) ita

    2024年02月07日
    浏览(55)
  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(50)
  • 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月19日
    浏览(58)
  • 【Kotlin】使用 ProgressBar 的样式属性来实现圆形进度条,进度使用gradient渐变效果

    Android ProgressBar 默认提供了水平和圆形两种进度条,水平进度条通过 ProgressBar 控件实现,而圆形进度条通过 ProgressDialog 控件实现。如果想要将 ProgressBar 控件设置为圆形进度条,可以使用 ProgressBar 的样式属性来实现。 首先,在布局文件中添加一个 ProgressBar 控件,并设置其样

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包