dora12345678
dora12345678
2012-06-18 19:24

动态缩放图像以适合指定的大小宽度和高度

已采纳

So after extensive research and tons of jQuery and Javascript solutions I simply could not find a way in which to dynamically scale images to a specified size both horizontally and vertically, I found tons of information on scaling to fit width wise and keep the aspect ratio, or scaling to fit height wise and keep the aspect ratio, but couldn't figure out whether the image was too tall or too short and adjust accordingly.

So in my example, I had a <div> with a set width of 460px and a set height of 280px, and i need the image to fit, all of itself into that area without stretching (maintaining its aspect ratio)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dongzi9196 dongzi9196 9年前

    Now after fiddling around with some width examples my classic algebra skills kicked in.

    If I took the width and divided it by the height, so in this case, 460/280 you in return get 1.642... which is the aspect ratio of that area, now if I looked at the aspect ratio of the image, I knew that if it was greater than 1.642... that that meant it was wider than the area, and if the aspect ratio of the image was less than, that it was taller.

    So I came up with the following,

    // Set the Image in question
    $image = 'img/gif/b47rz.gif';
    
    // Set the width of the area and height of the area
    $inputwidth = 460;
    $inputheight = 280;
    
    // Get the width and height of the Image
    list($width,$height) = getimagesize($image);
    
    // So then if the image is wider rather than taller, set the width and figure out the height
    if (($width/$height) > ($inputwidth/$inputheight)) {
                $outputwidth = $inputwidth;
                $outputheight = ($inputwidth * $height)/ $width;
            }
    // And if the image is taller rather than wider, then set the height and figure out the width
            elseif (($width/$height) < ($inputwidth/$inputheight)) {
                $outputwidth = ($inputheight * $width)/ $height;
                $outputheight = $inputheight;
            }
    // And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well
            elseif (($width/$height) == ($inputwidth/$inputheight)) {
                $outputwidth = $inputwidth;
                $outputheight = $inputheight;
                }
    // Echo out the results and done
    echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">';
    

    And it worked perfectly, so I thought I would share, hopefully this helps some people

    点赞 评论 复制链接分享
  • dotwc62080 dotwc62080 9年前

    If I understand your question correctly, I simpler way of scaling images would be to use the following CSS styling rules:

    max-width
    max-height
    

    These two styling rules alow you to specify the maximum width/height of an image. The browser will scale the image down (preserving the aspect ratio) to fit the size you specify. You can also use these two to specify a minimum width/height for an image:

    min-width
    min-height
    
    点赞 评论 复制链接分享