使用 jQuery 动态调整容器内图像的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4435866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize an image inside a container dynamically using jQuery
提问by wepper
I have a div container, and I call it "content_container". This container is able to drag and resize using jQuery UI. Inside this container, I implemented TinyMCE(content text editor). My problem is:
我有一个 div 容器，我称之为“content_container”。这个容器能够使用jQuery UI拖动和调整大小。在这个容器中，我实现了TinyMCE（内容文本编辑器）。我的问题是：
If the user inserts a 2000 pixels x 2000 pixels image, the container max-width is 1000 pixels. Then it will look like this:
如果用户插入 2000 像素 x 2000 像素的图像，则容器最大宽度为 1000 像素。然后它看起来像这样：
____________________
| Container header |
----------------------
| text [image...................image]
| [image...................image]
|____________________|
(I am sorry, I am still developing it in my localhost, and I haven't found a web hosting company yet, thus I can't give you the direct link to see the demo).
（对不起，我还在我的本地主机上开发它，我还没有找到网络托管公司，因此我不能给你直接链接来查看演示）。
Okay, the container is still resizeable, just that, the image size is always 2000 pixels x 2000 pixels. My question is: Is it possible when I resize the "content_container", the image will auto resize and fit into the container width?
好的，容器仍然可以调整大小，只是图像大小始终为 2000 像素 x 2000 像素。我的问题是：当我调整“content_container”的大小时，图像会自动调整大小并适合容器宽度吗？
If yes, how do I do it?
如果是，我该怎么做？
If no, is there another solution to solve this?
如果不是，是否有其他解决方案来解决这个问题？
Code
代码
Before TinyMCE, the container code:
在 TinyMCE 之前，容器代码：
<div id="content_container">
<div id="header">The header</div>
<div id="content">
<div id="inlineEditor"></div>
</div>
</div>
After the user enters content (for example, insert the image), the container will become:
用户输入内容后（比如插入图片），容器会变成：
<div id="content_container">
<div id="header">The header</div>
<div id="content">
<div class="inlineEditor">
<p>some text <img alt="test" src="../usrXX/img/imgname.jpg"></p>
</div>
</div>
</div>
As you can see, I can only manipulate the inlineEditor class.
如您所见，我只能操作 inlineEditor 类。
回答by jyoseph
This answer is CSS based. Have you tried applying a class to your image like so?
这个答案是基于 CSS 的。您是否尝试过将类应用到您的图像上？
.fluid-img{width:90%;}
And your image:
还有你的形象：
<img src="your_image.png" class="fluid-img">
Here's an example(tested in Chrome).
这是一个示例（在 Chrome 中测试）。
回答by Neeraj Singh
Try this:
尝试这个：
JavaScript code:
JavaScript 代码：
/* Start Image Resize Code */
function image_resize() {
$("img").each(function () {
/* Max width for the image */
var maxWidth = 230;
/* Max hieght for the image */
var maxHeight = 230;
/* Used for aspect ratio */
var ratio = 0;
/* Current image width */
var width = $(this).width();
/* Current image height */
var height = $(this).height();
/* Check if the current width is larger than the max */
if (width > maxWidth) {
/* Get ratio for scaling image */
ratio = (maxWidth / width);
/* Set New hieght and width of Image */
$(this).attr({
width : maxWidth,
height : (height * ratio),
alt : "your-alt-text-you-can-remove-this"
});
/* Reset height to match scaled image */
height = (height * ratio);
/* Reset width to match scaled image */
width = (width * ratio);
/* Check if current height is larger than max */
if (height > maxHeight) {
/* Get ratio for scaling image*/
ratio = (maxHeight / height);
/* Set new height and width */
$(this).attr({
height : maxHeight,
width : (width * ratio),
alt : "your-alt-text-you-can-remove-this"
});
}
}
});
}
/* End Image Resize Code */
/* How to use with DOM Ready */
$(document).ready(function () {
/* Call function for image resize (not for a Webkit browser) */
image_resize();
});
/* How to use with window load (for Webkit browser like Safari and Chrome) */
$(window).load(function () {
image_resize();
});
/* How to use on Window resize */
$(window).resize(function () {
image_resize();
});
