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()) {
	    if ($newsImg.height() < $imgContainer.height()) {
		    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.


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: Logo

You are commenting using your 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 Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

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


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

Toronto Blockchain Consulting and Smart Contract Development


SharePoint for everyone


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


Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: