Resize pictures with Javascript

[ifuseeknikcky]

Hi, I'm currently creating a blog with Blogger and I'm facing an issue with pictures sizes. My skills ? I'm a newbie...

Blog Address: http://www.blogmpocom.com/
Browser(s) Name/Version (ex: Firefox 4, Internet Explorer 8): Firefox 4, Chrome

OK, so I want the picture in the thumbnail to be CROPPED and not SCALED DOWN/RESIZED automatically, how do I do ? The thumbnail is 274px (width) by 101px (height), the picture in the thumbnail has to be 274px by 101px too but it must not be distorted.

Here is the Javascript code which needs to be worked on:

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="text-align:center; margin-bottom:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
....... (these dots are NOT in the code, they just separate the 2 Javascript bits)

function createSummaryAndThumbF(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summaryf_noimg;
if(img.length>=1) {
if(thumbnail_modef == "float") {
imgtag = '<span style="float:left;margin:0px 10px 10px 0;"><img src="'+img[0].src+'" width="'+img_thumbf_width+'px" height="'+img_thumbf_height+'px"/></span>';
summ = summaryf_img;
} else {
imgtag = '<div style="padding:0px" text-align="center"><img src="'+img[0].src+'" width="'+img_thumbf_width+'px" height="'+img_thumbf_height+'px"/></div>';
summ = summaryf_img;
}
}

I tried several tricks but the picture in the thumbnail is either still distorted or the thumbnail and the picture are the same size...
Any help is highly apreciated, thanks in advance !

[nomanic]

make a div 274px by 101px with overflow hidden, and shove the image tag with no width or height restrictions inside it, it will crop the image to your desired size.

try this -

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
imgtag = '<span style="text-align:center; margin-bottom:10px;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></span>';
summ = summary_img;
}
...
function createSummaryAndThumbF(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summaryf_noimg;
if(img.length>=1) { 
if(thumbnail_modef == "float") {
imgtag = '<span style="float:left;margin:0px 10px 10px 0;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></span>';
summ = summaryf_img;
} else {
imgtag = '<div text-align="center" style="padding:0px;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></div>';
summ = summaryf_img;
}
}

not sure about the spans, div should be fine

[ifuseeknikcky]

Thank you for your answer, Nomanic ! However, how do I make a div 274px by 101px with overflow hidden ?

I replaced the code I currently have in my Blogger template with the one you provided and it doesn't work.

Sorry for being heavy, i'm clueless