I'd like to start a discussion about the image resizing using 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
}
});
});
Modifying Aleksandar's answer to make it as jquery plugin and accepts maxwidth and maxheight as arguments, suggested by Nathan.
$.fn.resize = function(maxWidth,maxHeight) {
return this.each(function() {
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
};
Used as $('.imgClass').resize(300,50);
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));
}
});
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
}
});
$(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
CSS:
.imgMaxWidth {
max-width:100px;
height:auto;
}
.imgMaxHeight {
max-height:100px;
width:auto;
}
HTML:
<img src="image.jpg" class="imageToResize imgMaxHeight" />
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>
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.
A couple of suggestions:
.animate
method, like .animate({width: maxWidth})
, it should scale the other dimension for you automatically.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);
});
You can do this with the aeimageresize jquery plugin.
https://plugins.jquery.com/ae.image.resize
https://github.com/adeelejaz/jquery-image-resize
$(function() {
$( ".resizeme" ).aeImageResize({ height: 250, width: 250 });
});
function resize() {resizeFrame(elemento, margin);};
jQuery.event.add(window, "load", resize);
jQuery.event.add(window, "resize", resize);
function resizeFrame(item, marge) {
$(item).each(function() {
var m = marge*2;
var mw = $(window).width()-m;
var mh = $(window).height()-m;
var w = $('img',this).width();
var h = $('img',this).height();
var mr = mh/mw;
var cr = h/w;
$('img',this).css({position:'absolute',minWidth:(w-w)+20,minHeight:(h-h)+20,margin:'auto',top:'0',right:'0',bottom:'0',left:'0',padding:marge});
if(cr < mr){
var r = mw/w;
$('img',this).css({width: mw});
$('img',this).css({height: h*r});
}else if(cr > mr){
var r = mh/h;
$('img',this).css({height: mh});
$('img',this).css({width: w*r});
}
});
}
$(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
}
});
});
$(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
}
});
});
So much code here, but I think this is the best answer
function resize() {
var input = $("#picture");
var maxWidth = 300;
var maxHeight = 300;
var width = input.width();
var height = input.height();
var ratioX = (maxWidth / width);
var ratioY = (maxHeight / height);
var ratio = Math.min(ratioX, ratioY);
var newWidth = (width * ratio);
var newHeight = (height * ratio);
input.css("width", newWidth);
input.css("height", newHeight);
};
imgLiquid (a jQuery Plugin) seems to do what you ask.
Demo:
http://goo.gl/Wk8bU
JsFiddle example:
http://jsfiddle.net/karacas/3CRx7/#base
Javascript
$(function() {
$(".imgLiquidFill").imgLiquid({
fill: true,
horizontalAlign: "center",
verticalAlign: "top"
});
$(".imgLiquidNoFill").imgLiquid({
fill: false,
horizontalAlign: "center",
verticalAlign: "50%"
});
});
Html
<div class="boxSep" >
<div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
<img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
</div>
</div>
Source: Stackoverflow.com