Javascript-форум - Динамическая высота и ширина картинки и родителя в зависимости от ширины контейнера

Здравствуйте,

Я недавно начал осваивать Javascript и столкнулся с такой задачей. Имею функцию которая задает изображениям и их родителям высоту и ширину в зависимости от ширины контейнера. В контейнере, некоторые изображения имеют высоту в два раза выше стандартной высоты, т.е. вертикальные и помечаются классом "vertical" Проблемные участки (сроки: 21, 25, 27), на которых появляются ошибки "arrImgs[i].find is not a function". Подскажите пожалуйста, что я делаю не так? Может быть есть более изящное решение этой задачи?

function getImageWidthForScreen(containerWidth) {
    var numColumns = 0,
        spaceLeft = 0,
        ratio = 0,
		imageWidth = 300,
		imageHeight = 186,
		itemMargin = 7,
        newImgW, i, len, row, w, h, itemClass;
		numColumns = Math.floor(containerWidth / imageWidth);
		spaceLeft = containerWidth - numColumns * (imageWidth - itemMargin);
		if(spaceLeft > 0) {
			newImgW = 0;
			if(!(numColumns === 1 && imageWidth / 2 > spaceLeft)) {
				numColumns += 1
			}
			newImgW = Math.floor(containerWidth / numColumns) - itemMargin;
			ratio = imageWidth / newImgW;
			
			var arrImgs = $('.content-box');
			for(i = 0, len = arrImgs.length; i < len; i += 1) {
				itemClass = arrImgs[i].find('img').className;
				row = itemClass === 'vertical' ? 2 : 1; 
				w = newImgW;
				h = 0;
				arrImgs[i].width(w).find("img").width(w);
				h = (Math.floor(imageHeight / ratio) + itemMargin) * row - itemMargin;
				arrImgs[i].height(h).find("img").height(h);
			}
		}
		return newImgW + itemMargin
}

<div id="container">
	<div class="content-box">
		<img class="vertical" width="300" height="379" src="img1.jpg">
	</div>
	<div class="content-box">
		<img class="horizontal" width="300" height="186" src="img2.jpg">
	</div>
	...
</div>