CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Resize image with jQuery to fit the div

There are many interesting jQuery plugins for resizing and cropping of images. Among them are jrac and image scale. I have tested the latter: It works very fine

$(window).load(function() {
    var $imgContainer = $("#layout-news-image");
    var $newsImg = $("#layout-news-image img[rel!='sp_DialogLinkIgnore']");
    $imgContainer.css("width", $imgContainer.parent().width());
    if ($newsImg.length > 0) {
	    if ($newsImg.width() < $imgContainer.width()) {
		    $imgContainer.width($newsImg.width());
	    }
	    if ($newsImg.height() < $imgContainer.height()) {
		    $imgContainer.height($newsImg.height());
	    }
	    $newsImg.imgscale({ 
		    parent : '#layout-news-image', 
		    center: "true",
		    scale: "fill"
	    });
    }
});

This script checks if the original image is lesser than container div and doesn’t resize if it is so. #layout-news-image img[rel!=’sp_DialogLinkIgnore’] means that do not resize if there is a hidden image with rel=”sp_DialogLinkIgnore”. See the jQuery selectors for more info. This script can be improved by adding window resize event in javascript.

I use $(window).load instead of the usual $(document).ready because ready-function in jQuery runs when DOM is loaded, if the page is not cached it happens before the image is loaded. $(document).ready doesn’t work.

Advertisements

3 responses to “Resize image with jQuery to fit the div

  1. sdfsdf 2012-06-28 at 19:28

    doesn’t work: it’s just squeeze the picture. No examples included == no possibility to check.

    • Anatoly Mironov 2012-11-05 at 10:06

      Thank you Alejandro for the awesome js lib and sharing it. I will absolutely recommend it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

| Blockchain | Serverless Architecture | Microservices Architecture | DevOps | AWS Lambda | Teraform |

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: