>  기사  >  웹 프론트엔드  >  图片宽度处理问题_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:41:57974검색

有一图片大小像素为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又不会!!!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.