fvs引用服务器图片自适应问题

1.这是现在写的代码

2.现在的效果引用后图片位置靠上

3.怎么搞成垂直水平居中

JavaScript GoodLuck 发布于 2024-4-26 09:43

1min目标场景问卷

立即参与

回答问题关注问题

悬赏：4 F币 + 添加悬赏

提示：增加悬赏、完善问题、追问等操作，可使您的问题被置顶，并向所有关注者发送通知

共2回答

最佳回答

ZDXLv5初级互助
发布于2024-4-26 09:56（编辑于 2024-4-26 09:57）

//BJ为控件名称

setTimeout(function() {

//案例一：引用服务器内图片,需要在相应文件夹中存放该图片

$("div[widgetname='BJ']").css("background",

"url(/webroot/help/background/BJ.png) no-repeat center center / 100% 100% ");

//案例二：引用外部图片

$("div[widgetname='BJ']").css("background","url(https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2) no-repeat center center / 100% 100%")

,100)

div[属性名=属性值] 选择div含有指定属性和属性值的元素

no-repeat 图片不重复(参考：background-repeat)

center 图片居中(参考：background-position)

100% 图片大小双100% 表示拉伸 (参考：background-size )

举报收起评论(3)

GoodLuck(提问者) 用长宽100%图片就拉伸变形了，图片大小自适应我加了这个\'background-size\':\'contain\'，我看效果是适应大小了，只是问题是图片展示的位置不对，需要图片在页面内垂直水平居中

2024-04-26 10:18

ZDX 回复 GoodLuck(提问者) 你把 / 100% 100% 去掉就好了

2024-04-26 10:30

GoodLuck(提问者) 回复 ZDX 感谢！解决了，把100% 100%换成contain $(\"div[data-name=\'标题\']\").css(\"background\",\"url(/webroot/help/picture/biaoti-1.png) no-repeat center center / contain\")

2024-04-26 10:44

snrtuemcLv8专家互助
发布于2024-4-26 09:53

这个写法

"use document";

setTimeout(function() {

$("div[data-name='report0']").css({"background":

"url(/webroot/help/picture/changsha.jpg) center center / contain no-repeat ","background-size":"100% 100%"})

},1000)

效果

举报收起评论(2)

GoodLuck(提问者) 这个我试了一下我看效果还是拉伸的，我里边加的有这个\'background-size\':\'contain\'，图片我看效果已经实现大小自适应了，但是图片的位置不对，是居上的，但需要的效果是图片居中，因为组件大小和图片分辨率不一致没有办法调整为一致大小，如果用长宽100%会导致图片拉伸变形。

2024-04-26 10:15