Image resize to fit screen

前端 未结 6 1888
情歌与酒
情歌与酒 2020-12-10 19:08

I created this code to resize photos/images to fit the screen, considering the space available for the nav bar.

The script fires on image load and on navigation clic

相关标签:
6条回答
  • 2020-12-10 19:29

    I know this question is well old, but here's a solution (although I'm sure the OP's works fine too):

    This jQuery plugin seems to do exactly what you need: http://code.google.com/p/jquery-imagefit-plugin/

    if you perform it on a 100% height, 100% width element: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js"></script>
    <div style="width: 100%; height: 100%">
        <img  id="h5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
    </div>
    <script>
        jQuery('#h5').bind('load', function() {
            jQuery('div').imagefit();
        });
    </script>
    

    (demo: http://jsfiddle.net/nottrobin/9Pbdz/)

    0 讨论(0)
  • 2020-12-10 19:31

    Looks good to me, but I would suggest attaching your resize function to jQuery's Window Resize Event handler. Then the image will stretch and shrink with the page.

    0 讨论(0)
  • 2020-12-10 19:36

    I wrote a plugin!

    jQuery.fn.positionMe = function () {
        var oH = $(window).height();
        var oW = $(window).width();
        var iH = this.outerHeight();
        var iW = this.outerWidth();
    
        // When the image is too small so, do nothing
        if(iW>oW && iH>oH){
    
            // Otherwise, proportionate the image relative 
            // to its container
            if(oH/iH > oW/iW){
                this.css("width", oW);
                this.css("height", iH*(oW/iW))
            } else {
                this.css("height", oH);
                this.css("width", iW*(oH/iH));
            }
    
        }
        return this;
    }
    

    Usage:

    $("#photo").positionMe();
    
    0 讨论(0)
  • 2020-12-10 19:41
    var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||document.body.offsetWidth||window.screen.availWidth;
    var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||document.body.offsetHeight||window.screen.availHeight;
    
    function resize() {
    
        a=document.getElementsByClassName(' scale');
        for(var i=0; i<a.length; i++){
    
            var aW = a[i].offsetWidth;
            var aH = a[i].offsetHeight;
            var d=w/h;
            var mT, mL;
    
            if (d>=1.5){
                aW=w;
                aH=w-(w*(34/100));
                mT=(aH/2)*-1;   
                mL=(aW/2)*-1;   
            } else {
                aH=h;
                aW=h+(h*(66/100));
                mT=(aH/2)*-1;
                mL=(aW/2)*-1;
            }
    
            a[i].style.height=aH+'px';
            a[i].style.width=aW+'px';
            a[i].style.marginTop=mT+'px';
            a[i].style.marginLeft=mL+'px';  
        }
    }
    
    0 讨论(0)
  • 2020-12-10 19:50

    Try using the jQuery-Backgrounder plugin. You might be able to tweak it to do what you need. Here is an example:

    <script src="jquery.backgrounder.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript" charset="utf-8">
      $(function() {
        $('#my_background').backgrounder({element : 'body'});
      });
    </script>
    
    [...]
    
    <div id="my_background"><img src="birthday.jpg" alt="Birthday party" /></div>
    
    0 讨论(0)
  • 2020-12-10 19:50

    Here is how I do it:

     jQuery(document).ready(function($) {
          $('.wp-post-image').height($(window).height());
     });
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题