欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

图片宽度处理问题_html/css_WEB-ITnose

程序员文章站 2022-04-22 22:30:31
...
有一图片大小像素为1920X500,请问如何它适合在1920、1280、1024等不分辨率的屏幕上垂直居中显示。如1024分辨率的屏幕上只显示图片中间1024的宽度,高度都为500,请教各位。


回复讨论(解决方案)

我记得之前好像见过一个例子(忘记在哪了),是通过js设置背景图片的的位置,计算公式好像是设置图片的纵坐标为二分之屏幕的高度减去二分之图片的高度,你试下能实现不

我记得之前好像见过一个例子(忘记在哪了),是通过js设置背景图片的的位置,计算公式好像是设置图片的纵坐标为二分之屏幕的高度减去二分之图片的高度,你试下能实现不


新手上路,JS不熟,麻烦大侠能给个示例,多谢!

不知道你css的基础怎么样。。。这里要css+js的配合使用
1.首先图片得是绝对定位
position:absolute;
2.然后图片的左偏移量是50%
left:50%;
这个时候会发现图片会偏右
3.加左边距
3.1如果你的图片是固定宽度1920的话,给图片加个margin-left
margin-left:-960px;
3.2如果你的图片不是固定宽度的话得用js加做边距(原理就是获取图片的宽度,然后左边距为负宽度一半的)
document.getElementByTagName("img").style.marginLeft=-(document.getElementByTagName("img")[0].width/2)+"px";

不知道你css的基础怎么样。。。这里要css+js的配合使用
…………


CSS也是新手

哪位高手能给个详细示例?因CSS刚入门,JS又不会!!!