Jquery 调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1143517/
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
Jquery resizing image
提问by michele
I'd like to start a discussion about the image resizing using jQuery.
我想开始讨论使用 jQuery 调整图像大小。
That's my contribution: But I think I'm far away from the solution. What about the cropping? Who can help me?
这就是我的贡献：但我认为我离解决方案还很远。耕种呢？谁能帮我？
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});
});
回答by Aleksandar Jankovi?
You need to recalculate width and height after first condition. Here is the code of entire script:
您需要在第一个条件后重新计算宽度和高度。下面是整个脚本的代码：
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
回答by Nathan Long
A couple of suggestions:
几个建议：
- Make this a function where you can pass in a max or min size, rather than hard-coding it; that will make it more reusable
- If you use jQuery's
.animatemethod, like.animate({width: maxWidth}), it should scale the other dimension for you automatically.
- 将此函数设为可以传入最大或最小大小的函数，而不是对其进行硬编码；这将使它更可重用
- 如果您使用 jQuery 的
.animate方法，例如.animate({width: maxWidth})，它应该自动为您缩放另一个维度。
回答by Tyler
Great Start. Here's what I came up with:
伟大的开始。这是我想出的：
$('img.resize').each(function(){
$(this).load(function(){
var maxWidth = $(this).width(); // Max width for the image
var maxHeight = $(this).height(); // Max height for the image
$(this).css("width", "auto").css("height", "auto"); // Remove existing CSS
$(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
if(width > height) {
// Check if the current width is larger than the max
if(width > maxWidth){
var ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
} else {
// Check if current height is larger than max
if(height > maxHeight){
var ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
}
});
});
This has the benefit of allowing you to specify both width and height while allowing the image to still scale proportionally.
这样做的好处是允许您指定宽度和高度，同时允许图像仍然按比例缩放。
回答by FWH
Take a look at Jcrop. I use it and it's very good.
看看Jcrop。我使用它，它非常好。
回答by Miehz
$(function() {
$('.mhz-news-img img').each(function() {
var maxWidth = 320; // Max width for the image
var maxHeight = 200; // Max height for the image
var maxratio=maxHeight/maxWidth;
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var curentratio=height/width;
// Check if the current width is larger than the max
if(curentratio>maxratio)
{
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height *ratio); // Scale height based on ratio
}
else
{
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
}
});
});
回答by ThomasV
$(document).ready(function(){
$('img').each(function(){
var maxWidth = 660;
var ratio = 0;
var img = $(this);
if(img.width() > maxWidth){
ratio = img.height() / img.width();
img.attr('width', maxWidth);
img.attr('height', (maxWidth*ratio));
}
});
});
that will do the magic trick for everyone using latest jquery. Be sure you set your selector right (I used $('img') but that can be different in your case). This only works for landscape mode. But if you look at it, only a few things have to be done to set it to portrait, aka, if img.height() > maxHeight) stuff
这将为使用最新 jquery 的每个人做魔术。确保您正确设置了选择器（我使用了 $('img') 但在您的情况下可能会有所不同）。这仅适用于横向模式。但是如果你看看它，只需要做几件事就可以将它设置为纵向，也就是，如果 img.height() > maxHeight) 东西
回答by Osman
$(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width>height && width>maxWidth)
{
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
}
else if(height>width && height>maxHeight)
{
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
}
});
});
回答by Zeeshan Mahboob
You can resize image with this piece of code
您可以使用这段代码调整图像大小
var maxWidth = 600;
$("img").each(function () {
var imageWidth = $(this).width();
var imageHeight = $(this).height();
if (imageWidth > maxWidth) {
var percentdiff = (imageWidth - maxWidth) / imageWidth * 100;
$(this).width(maxWidth);
$(this).height(imageHeight - (imageHeight * percentdiff / 100));
}
});
回答by user3841678
CSS:
CSS：
.imgMaxWidth {
max-width:100px;
height:auto;
}
.imgMaxHeight {
max-height:100px;
width:auto;
}
HTML:
HTML：
<img src="image.jpg" class="imageToResize imgMaxHeight" />
jQuery:
jQuery：
<script type="text/javascript">
function onLoadF() {
$('.imageToResize').each(function() {
var imgWidth = $(this).width();
if (imgWidth>100) {
$(this).removeClass("imgMaxHeight").addClass("imgMaxWidth");
}
});
}
window.onload = onLoadF;
</script>
回答by Gavin Simpson
And old post... bit still. Resizing is one thing, but it can leave resized images uncentered, and looking a bit unorganised. So I added a few lines to the original post to add a left margin to centralise any resized images.
和旧帖子......有点静止。调整大小是一回事，但它会使调整后的图像不居中，看起来有点无组织。因此，我在原始帖子中添加了几行以添加左边距以将任何调整大小的图像集中在一起。
$(".schs_bonsai_image_slider_image").each(function()
{
var maxWidth = 787; // Max width for the image
var maxHeight = 480; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth)
{
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight)
{
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
var newwidth = $(this).width();
var parentwidth=$(this).parent().width();
var widthdiff=(parentwidth-newwidth)/2;
$(this).css("margin-left",widthdiff);
});
