Question

我正在尝试调整图像大小，但不要将其增加到原始大小以上 - 我还想将图像置于其容器中心。这是最好的方式，因为它有时看起来有点生涩？

我已经取出了jquery js链接。

<html>
    <head>
        <style type="text/css">
            .container {
                width: 100%;
                height: 100%;
                background: #444;
            }
        </style>                
    </head>

    <body>
        <div class="container">
            <img src="D:\large.png" />
        </div>
    </body>

    <script>
        var $orig_width=0;
        var $orig_height=0;
        var width;
        var height;
        var $img;

         $(window).load(function() {            
            $img = $('.container').find('img');     
            $orig_width=$img.width();
            $orig_height=$img.height(); 
            resize();           
         });

        function resize() {
            var width=$img.width();
            var height=$img.height();       
            var parentWidth  = $img.parent().width();
            var parentHeight = $img.parent().height();

            newWidth  = parentWidth;
            newHeight = newWidth/width*height;

            if (newHeight>$orig_height) newHeight=$orig_height;     
            if (newWidth>$orig_width) newWidth=$orig_width; 

            margin_top  = (parentHeight - newHeight) / 2;
            margin_left = ((parentWidth  - newWidth ) / 2);

            $img.css({'margin-top' :margin_top  + 'px',
                      'margin-left':margin_left + 'px',
                      'height'     :newHeight   + 'px',
                      'width'      :newWidth    + 'px'});
        }

        $(window).resize(function() {           
            resize();           
        })      

    </script>

</html>

Answer 1

您只需将表用于容器。因为很容易在表格中对齐它。用于设置固定宽度和高度属性将为固定大小的图像带来解决方案。

Answer 2

我在这种情况下使用max-width:100%;代替width:100%;。

Answer 3

似乎现在可以正常使用JQuery版本1.7.2

Answer 4

使用“CENTER”模式检查我的插件：https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

使用宽高比调整图像大小

4 个答案: