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

Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

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

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, 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

DevOps, Cloud and Blockchain Consultant


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 and share about...

%d bloggers like this: