【js脚本控制图片水平与垂直居中】的更多相关文章

js脚本控制图片水平与垂直居中

使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); var boxWidth = $(".box").width(); var imgHeight = $(obj).height(); var imgWidth = $(obj).width(); $(obj).css("position", "relative&…

DIV里面的图片水平与垂直居中的方法

<div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-align:center可以实现子元素字体,图片的水平居中. 2)img设置  margin:0 auto;display:block  ;            margin:0 auto是针对块元素的水平居中方法,所以要加上display:block. 2.垂直居中: 1)图片使用padding,用box的高度减…

DIV或者DIV里面的图片水平与垂直居中的方法

<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中. margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式:   vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效.   这里没考虑flex的垂直居中的用法 div中图片水平和垂直居中方式: 第一种方式…

使图片水平并垂直居中的一个Hack

淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果. 答案如下: <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN&qu…

css设置图片水平及垂直居中

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;…

JS/JQuery控制图片宽度

function changeImgWidth(){ for (i = 0; i <$('#info img').length; i++) { var imgWidth=$('#info img').eq(i).width(); if (imgWidth>612) { $('#info img').eq(i).css('width','612px'); } } } window.onload=changeImgWidth; 这里不能使用jquery的load()方法,因为IE中会失效,所以创建…

jQuery.rotate.js（控制图片转动）

jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转其它元素在一些低版本浏览器可能出现兼容器问题.所以应该尽量只用在旋转img元素上. 2. jQuery.rotate.js怎么用 2.1 接口 总共提供了四个方法: rorate(angle); rorate(parameters); getRorateAn…

js 滚轮控制图片缩放大小和拖动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 713px; heigh…

css 水平、垂直居中

水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.li等块级元素),通过在要居中元素设置 margin:0 auto(上.右.下.左),这里表示上下0 左右自适应,达到元素水平居中. 垂直居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置display: table-cell;vertical-align: middl…

js控制图片缩放、水平和垂直方向居中对齐

已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于是找js代码,看了几种写法总是感觉差点什么,算了,还是自己写吧,于是有了以下这个简单的方法,能自己主动依据图片容器大小进行缩放.水平和垂直居中对齐,效果例如以下图: [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.…