白云区建材网站建设推广,网站如何做网络推广,中国建设招标网住建部网站,泉州网站建设咨询废话不多说#xff0c;直接上代码#xff1a;
示例一#xff0c;使用css动态样式结合scale进行src图片的缩放。
//结构层#xff0c;使用动态属性配合计算属性来实现动态样式img :srcselectedItem.url alt :styleelementStyle(item)直接上代码
示例一使用css动态样式结合scale进行src图片的缩放。
//结构层使用动态属性配合计算属性来实现动态样式img :srcselectedItem.url alt :styleelementStyle(item)
//在计算属性中使用returnitem来接收从结构层中传递的相关宽高值
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背景图图片的缩放。 !-- 通过背景图方式展示图片 --div :stylegetelementStyle(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})};};},
