社区
CSS
帖子详情
如何设置
的固定宽度和高度
goshowk
2005-10-24 12:40:24
如何设置<div>的固定宽度和高度,使得无论<div>和</div>内部放入多大的内容或图片都不会超过设置的宽度和高度???
...全文
3856
5
打赏
收藏
如何设置<div>的固定宽度和高度
如何设置的固定宽度和高度,使得无论和内部放入多大的内容或图片都不会超过设置的宽度和高度???
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
5 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
fantiny
2005-10-24
打赏
举报
回复
里面的setFitScreen()看懂你就知道怎么设置了。
fantiny
2005-10-24
打赏
举报
回复
<!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 height="20">
<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>
fantiny
2005-10-24
打赏
举报
回复
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Untitled Document</title>
<STYLE TYPE="text/css">
<!--
.DivMain {
position : absolute;
text-align : center ;
overflow : hidden;
width : 100px;
height : 100px;
}
-->
</STYLE>
</head>
<body>
<div class="DivMain">
<img src="23.jpg"></div>
</body>
</html>
hsboy
2005-10-24
打赏
举报
回复
overflow : hidden;
不过这样div中的内容容纳不了的部分就看不见了。
fantiny
2005-10-24
打赏
举报
回复
.DivMain {
position : absolute;
text-align : center ;
overflow : hidden;
width : 100px;
height : 100px;
}
前端显示和隐藏<
div
>的方法 / 判断
端显示和隐藏<
div
>的方法 / 判断
HTML <
div
>标签 内容超出
div
固定
高度
,超出部分隐藏
如果想将超出
div
高度
和
宽度
的内容隐藏就用overflow:hidden; 如果想让超出的内容显示而
div
宽高不变,用overflow:auto; 在原来的
div
宽高基础上出现滚动条; overflow-x:hidden; /*
设置
宽度
超出
div
宽度
后自动隐藏*/ overflow-y:hidden;/*
设置
高度
超出
div
高度
后出现滚动条*/ 摘要:
table表格
定宽定高显示的有效方法
待解决问题 想要让这个图片的第一条记录和其他其他两条记录的
高度
一直 (定
宽度
预先
设置
好了) 理想效果(需求) 就是每个字段的值太长显示不了可以自动隐藏起来__…__,只显示那么高,不会有另外起一行的变化。 ...
设置
div
高度
为100%
直接使用如下代码
设置
div
的
宽度
和
高度
时,
div
宽度
会铺满屏幕,而
高度
为零。<
div
style="width:100%;height:100%">
div
>原因:浏览器会直接计算窗口的
宽度
,作为容器
宽度
的缺省值。但是并不会计算窗口的
高度
,只是简单的向下堆砌。解决方法: 1.为该元素的所有父元素
设置
宽度
为100%。
div
的定义
div
的用法
div
的属性(最全的
div
学习页面)
最全的
div
介绍
CSS
61,115
社区成员
60,728
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章