JQuery：动态图像调整大小 [英] JQuery: Dynamic Image Resize
本文介绍了JQuery：动态图像调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为wordpress做一个响应式主题。为了准备，我使用JQuery创建了我的resize脚本，以便在需要时动态调整它。
< html>
< head>
< script type =text / javascriptsrc =jquery.js>< / script>
<？
class generate_image {
var $ image;
函数__construct（$ getimage）{
$ this-> image = $ getimage;
}
函数display（）{
$ wrapper ='< img id =samplesrc ='。$ this-> image。'> ;
返回$ wrapper;
}
}
$ view = new generate_image（sample.jpg）;
？>
< script language =javascripttype =text / javascript>
var resize = {
bindimage：function（containerid）{
var width = $（containerid）.width（）;
var height = $（containerid）.height（）;
var maxwidth = 1291;
$（window）.resize（function（）{
var percent = $（window）.width（）/ maxwidth;
var now_height = height * percent;
var now_width = width * percent;
$ b $（'img'）。attr（'height'，now_height）;
$（'img'）。attr（'width'， ）;
$ b $（'。win_height'）。text（Windows Height：+ $（window）.height（））;
$（'。win_width'）。text （Windows Width：+ $（window）.width（））;
$ b $（'。img_height'）。text（Image Height：+ $（'img'）。height ））;
$（'。img_width'）。text（Image Width：+ $（'img'）。width（））;
$（'。win_calcu'） .text（Image Width：+ now_height）;
}）; //结束调整大小
} //结束绑定函数
} //结束对象
$（document）.ready（function（）{
resize.bindimage（'im g'）;
}）;
< / script> *
< / head>
< body>
< div>
< div class =image>
<？ echo $ view-> display（）; ？>
< / div>
< div class =information>
< table>
< tr>
< td>
< p class =img_height>图像高度< / p>
< / td>
< td>
< p class =img_width>图片宽度< / p>
< / td>
< / tr>
< tr>
< td>
< p class =win_height>视窗高度< / p>
< / td>
< td>
< p class =win_width>窗口宽度< / p>
< / td>
< / tr>
< tr>
< td>
< p class =win_calcu>< / p>
< / td>
< / tr>
< / table>
< / div>
< / div>
< / body>
< / html>
有什么想法？这适用于IE9，但不适用于Chrome，它将高度和宽度设置为0.一旦我调整它的大小。尝试设置一个now_height上的整数，now_width变量
var now_height = parseInt（height * percent）;
var now_width = parseInt（width * percent）;
也尝试在$（window）.load（）事件上调用你的函数
$（window）.load（function（）{
resize.bindimage（'img'）;
}）;
还会检查变量宽度的范围，在resize函数中使用它的高度，但它不是'在那里可读......将你的代码改成这样的东西
< script language =javascripttype =text /的javascript>
var width = 0;
var height = 0;
var resize = {
bindimage：function（containerid）{
width = $（containerid）.width（）;
height = $（containerid）.height（）;
I'm trying to do a responsive theme for wordpress. For preparation, I'm creating my resize script using JQuery to dynamically adjust it when needed.
<html>
<head>
<script type="text/javascript" src="jquery.js" ></script>
<?
class generate_image {
var $image;
function __construct($getimage) {
$this->image = $getimage;
}
function display () {
$wrapper = '<img id="sample" src="' . $this->image . '">';
return $wrapper;
}
}
$view = new generate_image("sample.jpg");
?>
<script language="javascript" type="text/javascript">
var resize = {
bindimage: function (containerid) {
var width = $(containerid).width();
var height = $(containerid).height();
var maxwidth = 1291;
$(window).resize(function(){
var percent = $(window).width() / maxwidth;
var now_height = height * percent;
var now_width = width * percent;
$('img').attr('height', now_height);
$('img').attr('width', now_width);
$('.win_height').text("Windows Height: " + $(window).height() );
$('.win_width').text("Windows Width: " + $(window).width() );
$('.img_height').text("Image Height: " + $('img').height() );
$('.img_width').text("Image Width: " + $('img').width() );
$('.win_calcu').text("Image Width: " + now_height );
});//end of resize
}//end of bind function
}//end of object
$(document).ready(function(){
resize.bindimage('img');
});
</script>*
</head>
<body>
<div>
<div class="image">
<? echo $view->display(); ?>
</div>
<div class="information">
<table>
<tr>
<td>
<p class="img_height">Image Height</p>
</td>
<td>
<p class="img_width">Image Width </p>
</td>
</tr>
<tr>
<td>
<p class="win_height">Window Height</p>
</td>
<td>
<p class="win_width">Window Width</p>
</td>
</tr>
<tr>
<td>
<p class="win_calcu"></p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Any Thoughts? This works in IE9 but not in Chrome, it set the height and width to 0 once I resize it.
解决方案
Try setting an integer on now_height,now_width variables
var now_height = parseInt(height * percent);
var now_width = parseInt(width * percent);
also try calling your function on $(window).load() event
$(window).load(function(){
resize.bindimage('img');
});
also checkout the scope of variable width,height you are using it inside the resize function but it isn't readable there...change your code to something like this
<script language="javascript" type="text/javascript">
var width = 0;
var height = 0;
var resize = {
bindimage: function (containerid) {
width = $(containerid).width();
height = $(containerid).height();
这篇关于JQuery：动态图像调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
