css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）

需求

绿色框为背景图片，两个绿色箭头需要按照要求显示在框内的对应位置上

看到需求直接使用 position定位来解决，但是因为要求的分辨率为1024x768 ，比自身开发的电脑屏幕要小很多，所以也遇到了一些问题

问题

绿色边框背景图 ，考虑到页面呈现效果设置了 93%的宽度，

.flow-img {width: 93%;
}

绿色箭头均为 position: absolute;

然后发现小屏幕时，箭头位置偏移了，不能固定在要求的位置上，在尝试修改后发现，绿色边框图片外面还包有一层div，应该给这个div 设置宽度 93%，而绿色边框图片宽度应为 100%

完整代码

  <div class="middlePart">//绿色边框背景图<img src="../../../assets/images/status/flow.png" class="flow-img" /><!-- 左侧下箭头 --><div class="arrow-left"><img :src="arrowRedUrl" class="arrowImg" /></div><!-- 左侧上箭头 --><div class="arrow-right"><img :src="arrowRedUrl" class="arrowImg arrowImg-up" /></div></div>

 data() {return {arrowGreenUrl: require("../../../assets/images/status/redDown.png"),arrowYellowUrl: require("../../../assets/images/status/yellowDown.png"),arrowRedUrl: require("../../../assets/images/status/greenDown.png"),};},

<style rel="stylesheet/scss" lang="scss" scoped>.middlePart {position: relative;width: 93%;margin: 11px 0px 11px 35px;
}
.flow-img {width: 100%;
}
.arrowImg {width: 100%;height: 100%;
}
.arrow-left {position: absolute;top: 40%;left: 6%;
}
.arrow-right {position: absolute;top: 42%;right: 4%
}
.arrowImg-up {transform: rotate(180deg);
}
</style>

效果

大屏

小屏幕

tips：

1. 使用定位时，父级应使用 position: relative;相对定位，子级使用 position: absolute;

2. 在有图片做背景时，考虑到适配不同屏幕，图片宽度不能写死，图片宽度应为100%

3. 定位时，使用百分比来匹配位置

一定要注意外层是否有多个div嵌套，如果有要找到最外层的作为父级！！！

css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）相关推荐

实现opencv在图片上画框准确定位某个主体
前言本章主要讲述图片的缩小与放大,以及在图片上框出自己目标的东西目录实现opencv在图片上画框准确定位某个主体一.如何在opencv内导入图片二.如何对图片进行缩放? 1.在放入图片的基础 ...
如何在线压缩图片大小？图片上传太大怎么缩小？
图片上传过大怎么缩小?如果使用在线图片压缩的工具话就非常的方便,推荐大家一款无需下载就可以在线图片压缩工具--压缩啦,下面来看看怎么在线图片压缩大小吧. 1.打开浏览器进入压缩啦选择图片压缩,上传图片 ...
php flash 图片上传,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
给图片添加水印效果图的函数(可以在图片上添加自己的版权和LOGO图片的水印) 【转载】...
protected void Button1_ServerClick(object sender, System.EventArgs e) { ...
浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
(转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
GIF图片怎么压缩？如何快速缩小GIF图片？
我们在浏览微信公众号的时候经常会看到很多公众号文章都会用GIF图片进行配文,因为GIF图片配文非常生动有趣,能够有效的提升用户阅读体验感.但是在编辑公众号推文的时候发现,最大可上传10M以内的图片文件 ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...

css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）

需求

绿色框为背景图片，两个绿色箭头需要按照要求显示在框内的对应位置上

问题

完整代码

效果

大屏

小屏幕

tips：

css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）相关推荐

最新文章

热门文章

css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）

需求

绿色框为背景图片，两个绿色箭头需要按照要求显示在框内的对应位置上

问题

完整代码

效果

大屏

小屏幕

tips：

css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）相关推荐

最新文章

热门文章

css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）

css 图片上使用position定位图片，缩小屏幕图片会跑（已解决）相关推荐