Jquery 根据div高度放大字体大小
我将文本水印应用于多幅图像，我想显示文本的缩放比例。我通过放大div以及文本来根据div放大字体大小 这就是我正在做的Jquery 根据div高度放大字体大小,jquery,html,css,jquery-ui,Jquery,Html,Css,Jquery Ui,我将文本水印应用于多幅图像，我想显示文本的缩放比例。我通过放大div以及文本来根据div放大字体大小 这就是我正在做的 上面的代码在水平缩放的情况下工作良好，但在垂直缩放的情况下无法获得精确的缩放。请给我指出正确的方向您可以使用jquery resize插件调用div resize事件。您将从以下链接获得此插件 我通过从先前的高度减去当前高度来检查高度变化的比例。为此，我从height参数中删除了“px”值。如果它是一个大小的增加，那么我会根据高度的变化率以相似的比例增加字体大小，否则我会减小字
上面的代码在水平缩放的情况下工作良好，但在垂直缩放的情况下无法获得精确的缩放。请给我指出正确的方向您可以使用jquery resize插件调用div resize事件。您将从以下链接获得此插件 我通过从先前的高度减去当前高度来检查高度变化的比例。为此，我从height参数中删除了“px”值。如果它是一个大小的增加，那么我会根据高度的变化率以相似的比例增加字体大小，否则我会减小字体大小 但在这样做的过程中出现了一些问题。当我改变字体大小时，它也在调整div的大小，所以它再次调用resize事件，它变成了一个无限循环。因此，我使用了一个名为resishort的布尔变量resize，在完成字体大小调整后，我将其设置为true，因此下次调用resize方法时，它将跳过函数的执行
<html>
<head>
</head>
<body>
<div id="mydiv" style="min-height:300px;font-size:23px;border:solid 2px black;">
Hai I am Akhil
<div id="inner" style='height:200px;border:solid 2px red;'></div>
</div>
</div>
<input type="button" id="check" value="Increase"/>
<input type="button" id="down" value="Decrease"/>
<script src="jquery-1.11.1.js"></script>
<script src="jquery-resize.js"></script>
<script>
var height=$("#mydiv").css("height");
height=height.substring(0,(height.length-2));
var font=$("#mydiv").css("font-size");
var resi=false;
$("#mydiv").resize(function(){
if(resi){
var currentHeight=$("#mydiv").css("height");
currentHeight= currentHeight.substring(0,(currentHeight.length-2));
var change=currentHeight-height;
height=currentHeight;
if(change>0){
var currentFont=$("#mydiv").css("font-size");
font=currentFont;
currentFont= currentFont.substring(0,(currentFont.length-2));
$("#mydiv").css("font-size", ((currentFont*(change/100))+"px"));
resi=false;
}else if(change<0){
change=change*-1;
var currentFont=$("#mydiv").css("font-size");
font=currentFont;
currentFont= currentFont.substring(0,(currentFont.length-2));
$("#mydiv").css("font-size", ((currentFont/(change/100))+"px"));
resi=false;
}
}
});
$("#check").click(function(){
$("#inner").css("height","600px");
resi=true;
});
$("#down").click(function(){
$("#inner").css("height","400px");
resi=true;
});
</script>
</html>
如果你有任何疑问，你可以问。为什么不在css中使用字体大小：10%或使用em，它会自动缩放到行高。我尝试了字体大小：10%和em，但仍然没有得到正确的值可能在同一对象上使用相同的ID它似乎是背景IMG宽度比高度的两倍
<html>
<head>
</head>
<body>
<div id="mydiv" style="min-height:300px;font-size:23px;border:solid 2px black;">
Hai I am Akhil
<div id="inner" style='height:200px;border:solid 2px red;'></div>
</div>
</div>
<input type="button" id="check" value="Increase"/>
<input type="button" id="down" value="Decrease"/>
<script src="jquery-1.11.1.js"></script>
<script src="jquery-resize.js"></script>
<script>
var height=$("#mydiv").css("height");
height=height.substring(0,(height.length-2));
var font=$("#mydiv").css("font-size");
var resi=false;
$("#mydiv").resize(function(){
if(resi){
var currentHeight=$("#mydiv").css("height");
currentHeight= currentHeight.substring(0,(currentHeight.length-2));
var change=currentHeight-height;
height=currentHeight;
if(change>0){
var currentFont=$("#mydiv").css("font-size");
font=currentFont;
currentFont= currentFont.substring(0,(currentFont.length-2));
$("#mydiv").css("font-size", ((currentFont*(change/100))+"px"));
resi=false;
}else if(change<0){
change=change*-1;
var currentFont=$("#mydiv").css("font-size");
font=currentFont;
currentFont= currentFont.substring(0,(currentFont.length-2));
$("#mydiv").css("font-size", ((currentFont/(change/100))+"px"));
resi=false;
}
}
});
$("#check").click(function(){
$("#inner").css("height","600px");
resi=true;
});
$("#down").click(function(){
$("#inner").css("height","400px");
resi=true;
});
</script>
</html>