JQuery：动态图像调整大小答案

【问题标题】：JQuery: Dynamic Image ResizeJQuery：动态图像调整大小
【发布时间】：2012-01-06 16:22:29
【问题描述】：

我正在尝试为 wordpress 做一个响应式主题。为了准备，我正在使用 JQuery 创建我的调整大小脚本，以便在需要时动态调整它。

<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>

有什么想法吗？这在 IE9 中有效，但在 Chrome 中无效，一旦我调整它的大小，它就会将高度和宽度设置为 0。

【问题讨论】：

标签： jquery html image

【解决方案1】：

尝试在 now_height,now_width 变量上设置一个整数

var now_height = parseInt(height * percent);
var now_width = parseInt(width * percent);

也尝试在 $(window).load() 事件上调用你的函数

$(window).load(function(){
    resize.bindimage('img');
});

还检查变量宽度的范围，您在调整大小函数中使用它的高度，但它在那里不可读...将您的代码更改为类似的内容

<script language="javascript" type="text/javascript">
var width = 0;
var height = 0;
var resize = {
bindimage: function (containerid) {
        width = $(containerid).width();
        height = $(containerid).height();

【讨论】：

它有效。但是当它到屏幕分辨率时它不会缩小。
你是说if函数B嵌套在函数A中，函数A中的变量在函数B中不可读？