缩小图像以适合 div答案

【问题标题】：Scale down image to fit div缩小图像以适合 div
【发布时间】：2013-05-20 04:28:24
【问题描述】：

我正在尝试缩小 inage 以适应大于设置的最大宽度和高度的 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';

以下是我手动调整图像大小的示例，它看起来不错，可以为您提供一个粗略的示例，说明它应该是什么样子。我打算使用样式“top”和“left”将图像放置在 div 的中心。

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

任何帮助将非常感谢。

【问题讨论】：

@undefined 我正在编辑一个现有的 js 图像滑块，并想覆盖任何应用到它的 css。
您标记了您的帖子 jQuery，但您没有发布任何 jQuery。这是正确的吗？
为什么不直接将宽度设置为 100%？
@RichBradshaw 如果图像小于最大尺寸会不会拉伸图像？
@Mooseman JS 或 jQuery。

标签： javascript jquery css

【解决方案1】：

这是计算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

【讨论】：

感谢我所追求的
顺便说一句：这段代码也增加了太小的图像并保持原来的纵横比。

【解决方案2】：

为什么还需要 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%;
}

【讨论】：