如何实现HTML整体进行缩放 用css或javascript代码都可以
只是缩小吗?不会再放大?
那你就用直接晌乎用CSS吧所有文字,图片,裤谨尘宽度高度,位置,重新调整一下不就OK了
如果要可以放大又可以缩小的
就做两套CSS文件,和图片文件夹
JS判断,放大就引用
放大的css文件和图片文件
缩小就引用
缩放小的CSS文胡禅件和图片文件
如何利用JS或者CSS样式来自动调整图片大小
js版和css版自动按比例调整图片大小方法,分别如缺辩下:
titlejavascript图片大小处理函数/title
script language=Javascript
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
神扮庆 image.src=ImgD.src;
if(image.width0 image.height0){
var rate = (proMaxWidth/image.width proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate = 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
游握 ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
/script
/head
body
img src=”999.jpg” border=0 width=”150″ height=”110″ onload=proDownImage(this); /
img src=”room.jpg” border=0 width=”150″ height=”110″ onload=proDownImage(this); /
/body
纯css的防止图片撑破页面的代码,图片会自动按比例缩小:
style type=”text/css”
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width 600 ? “600px” : this.width)!important;}
/style
div class=”content-width”
pimg src=”/down/js/images/12567247980.jpg”//p
pimg src=”/down/js/images/12567247981.jpg”//p
/div
js 按钮+图片 放大/缩小 现在是以图片a 的左上角为中心放大的 如何改成 以图片的正中心放大缩小?
!doctype html
html
head
meta charset=”UTF-8″
style type=”text/css”
*{margin: 0;padding:0;}
/style伏孙
/head
body
div style=”border:1px #0066FF solid;” img name=”a” src=”imgs/a.png”激厅郑/div
img name=”b” src=”imgs/aa.png”
img name=”c” src=”imgs/明颂aa.png”
script
var flag = true;//状态true为正常的状态,false为放大的状态
var imga = document.getElementsByName(“a”)[0];//图片元素
var imgb = document.getElementsByName(“b”)[0];//图片元素
var imgc = document.getElementsByName(“c”)[0];//图片元素
imgb.onclick = function(){
imga.style.transform=”scale(“+(flag?1.1:1)+”)”;
flag=!flag;
}
imgc.onclick = function(){
imga.style.transform=”scale(“+(flag?0.9:1)+”)”;
flag=!flag;
}
/script
/body
/html