JavaScript итерация только через первые четыре элемента ⇐ CSS

[Anonymous]

Так что я хочу отобразить аватар с разными размерами, выглядящим немного хорошо. Если изображение имеет ширину
//@*Displaying list of images and names-----------------------*@
@foreach (var item in Model) {




@Html.DisplayFor(modelItem => item.Name)

}
//@*JavaScript------------------------------------------------*@

for (var i = 0; i < $(".avatar").length - 1; i++) {
if ($(".avatar").naturalWidth > $(".avatar").naturalHeight) {
$(".avatar").eq(i).addClass("landscape");
}
}

//@*CSS-------------------------------------------------------*@
div.avatar-container {
display: inline-block;
position: relative;
width: 70px;
height:70px;
overflow: hidden;
}
div.img-thumbnail{
width:100% !important;
height:100%;
background-color:#e1dada;
}
.img-thumbnail{
padding:1px !important;
}
.avatar {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.landscape{
width:100%;
height:auto;
}


Подробнее здесь: https://stackoverflow.com/questions/307 ... r-elements