如何设置div的固定宽度和高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置div的固定宽度和高度相关的知识，希望对你有一定的参考价值。
直接上个实例代码吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body
margin: 0px;
background-color: #999999 ;
.DivMain
position : absolute;
text-align : center ;
overflow : hidden;
.ImgMain
position : absolute;
overflow : hidden;
.TBMain
background-color: #CCCCCC ;
padding: 0px;
</style>
<SCRIPT LANGUAGE="javascript">
<!--
var originalWidth;
var originalHeight;
var ObjDrag;
function setInit(objImg)
originalWidth = objImg.width;
originalHeight = objImg.height;
//initImg(objImg);
fmImgZoom.Original.click();
function initImg(objCurrent)
var intBodyWidth ;
var intBodyHeight ;
var objTbMain ;
var objDivMain ;
//var objImgMain ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objTbMain = document.getElementById("tbMain") ;
objDivMain = document.getElementById("divMain") ;
//objImgMain = document.getElementById("imgMain") ;
objTbMain.top = 0;
objTbMain.height = 20;
objTbMain.width = intBodyWidth;
objDivMain.top = 20 ;
objDivMain.left = 0 ;
objDivMain.height = intBodyHeight - 20 ;
objDivMain.width = intBodyWidth ;
initZoom(objCurrent);
function initZoom(obj)
var intObjWidth ;
var intObjHeight ;
var intDivHeight ;
var intZoomRatio ;
var objDivMain ;
var objTbMain;
objDivMain = document.getElementById("DivMain");
objTbMain = document.getElementById("tbMain") ;
intDivHeight = objDivMain.height;
intObjHeight = obj.height;
intZoomRatio = intDivHeight / intObjHeight;
obj.style.zoom = intZoomRatio ;
obj.style.top = 0;
obj.style.left = 0;
fnWritePos (obj.style.left,obj.style.top,obj.style.zoom) ;
function setFitScreen()
var objImg;
objImg = document.getElementById("imgMain") ;
initImg(objImg);
function setOriginal()
var objImg;
var objDivMain ;
var intBodyWidth ;
var intBodyHeight ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objImg = document.getElementById("imgMain") ;
objDivMain = document.getElementById("divMain") ;
objImg.style.left = 0 ;
objImg.style.top = 0 ;
objImg.width = originalWidth;
objImg.height = originalHeight;
objImg.style.zoom = 1 ;
objDivMain.style.width = intBodyWidth ;
objDivMain.style.height = intBodyHeight - 20 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
function fnMouseDown(obj)
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l=event.x-ObjDrag.style.pixelLeft;
ObjDrag.t=event.y-ObjDrag.style.pixelTop;
function fnMouseMove()
if(ObjDrag!=null)
ObjDrag.style.left = event.x-ObjDrag.l;
ObjDrag.style.top = event.y-ObjDrag.t;
fnWritePos(ObjDrag.style.left,ObjDrag.style.top,ObjDrag.style.zoom);
function fnMouseUp()
if(ObjDrag!=null)
ObjDrag.releaseCapture();
ObjDrag=null;
function fnWritePos(intLeft,intTop,intZoom)
var objbtnImgInfo;
objbtnImgInfo = document.getElementById("btnImgInfo") ;
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom ;
function fnZoomIn()
var objImg;
objImg = document.getElementById("imgMain") ;
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
function fnZoomOut()
var objImg;
objImg = document.getElementById("imgMain") ;
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
function fnContextMenu()
window.event.returnValue=false;
function fnDivMouseDown()
if ( event.button == 2 && event.srcElement.id != "imgMain")
setOriginal();
function setDisplay()
var objImg;
objImg = document.getElementById("imgMain") ;
if(objImg.style.visibility == "")
objImg.style.visibility = "hidden";
else
objImg.style.visibility = "";
//-->
</SCRIPT>
</HEAD>
<BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD >
<input type="button" name="ZoomIn" value="ZoomIn" onclick="fnZoomIn()">
<input type="button" name="ZoomOut" value="ZoomOut" onclick="fnZoomOut()">
<input type="button" name="Original" value="Original" onclick="setOriginal()">
<input type="button" name="FitScreen" value="FitScreen" onclick="setFitScreen()">
<input type="button" name="FitScreen" value="hide/view" onclick="setDisplay()">
<input id="btnImgInfo" size="50">
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()"><img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
</form>
</BODY>
</HTML> 参考技术A css的border属性可以设置边框的粗细、样式和颜色，而边框的宽度和高度取决于div的宽度和高度，例如
divwidth:200px; height:100px; border: 1px solid #ff0000;
上面css代码设置div宽度200px，高度100px，边框为1px宽的红色实线
css手机版页面制作时如何让背景图片适应div的高度和宽度
参考技术A具体步骤如下：
1、输入position:fixed; top: 0; left: 0;使整个div固定在屏幕的最上方和最左方。
2、输入width:100%;height:100%; min-width: 1000px;这个可以适合div的高度和宽度，而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。
3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
4、输入background-position: center 0;使图片的位置，居中，靠左对齐。
以上是关于如何设置div的固定宽度和高度的主要内容，如果未能解决你的问题，请参考以下文章
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏