缩小图像以适合div

我想缩小一个inage以适应比最大宽度和高度更大的div容器。我有下面的代码获取图像的宽度和高度，并允许设置最大大小。缩小图像以适合div

这是我超出了我的深度，它下面加载的图像是662x599。宽度大于允许的最大值，所以我需要它正确缩小并放入div的中心。

var max_width = 713; 
var max_height = 550; 

var img = new Image(); 
img.onload = function() { 
    img.width = this.width; 
    img.height = this.height; 
} 
img.src = 'files.jpg';

下面就是一个例子我调整图像大小，手动看起来不错给你怎样看应该粗略的例子。我打算使用“顶部”和“左侧”样式将图像放置在div的中心。

<img style="width: 613px; height: 550px; top: 0px; left: 50px;" src="files.jpg">

任何帮助将非常感谢。

来源

2013-05-19 arbme

为什么不使用CSS？ – undefined

@undefined我正在编辑一个现有的js图像滑块，并且想要覆盖应用于其上的任何css。 – arbme

你标记了你的文章jQuery，但你没有发布任何jQuery。它是否正确？ – Mooseman

这是计算代码width,height,top,left。

// max_width = 713 
// max_height = 550 
// img.width = 662 
// img.height = 599 

scale_width = max_width/img.width; 
scale_height = max_height/img.height; 

scale = Math.min(scale_width, scale_height); 

width = img.width * scale; // 608 
height = img.height * scale; // 550 

left = (max_width - width)/2; // 52 
top = (max_height - height)/2; // 0

来源

2013-05-19 20:23:45 furas

谢谢 – arbme

顺便说一句：这段代码也增加了太小的图像，并保持原始的高宽比。 – furas

为什么你甚至需要JavaScript？只需在图像上设置max-width以匹配包含div（即100％）的图像。

http://jsfiddle.net/Pp7Rg/1/

<div> 
    <img src="https://www.google.com/url?q=http://www.photoinpixel.com/mypicture/persian-cat-hd-wallpaper.jpg&ei=dTWZUYHKOoqkiQLto4GYAw&sa=X&oi=unauthorizedredirect&ct=targetlink&ust=1368996989961871&usg=AFQjCNHdsjijJ2oeKrUuvZRMFUuIRxydtg"/> 
</div> 

div { 
    width: 500px; 
} 

img { 
    max-width: 100%; 
}

来源

2013-05-19 20:28:24 mpen

缩小图像以适合div

回答

相关问题