[Роман Андреевич]

$(function() {

var $windowWidth = $(window).width(),
$windowHeight = $(window).height(),
$imgPreviewBlock = $("section#img_preview").hide(),
$imgPreviewHeader = $imgPreviewBlock.find("h2"),
$imgPreviewBlockFigure = $imgPreviewBlock.find("figure").css("cursor", "default"),
$imgPreview = $("section#img_preview img").css("cursor", "default"),
$previewCounter = $imgPreviewBlock.find("span"),
$sectionProductFoto = $("section#product_foto"),
$sectionProductHeader = $sectionProductFoto.find("h2"),
$mainProductFotofigure = $sectionProductFoto.find("figure.main_product_foto "),
$mainProductFoto = $mainProductFotofigure.find("img"),
$productFotoList = $sectionProductFoto.find("ul#foto_list"),
$productFotoBlockLi = $productFotoList.find("li"),
$foto = $productFotoBlockLi.find("img"),
$activeImg = $foto.filter(".main"),
$activeImgSrc = $activeImg.attr("src"),
$openFotoPreview = $("figure.foto_block"),
$fotoControlButtons = $imgPreviewBlock.find(".button"),
$fotoControlButtonsArrows = $imgPreviewBlock.find(".arrows"),
$imgPreviewBlockTitle = $imgPreviewBlock.find("p"),
$imgPreviewBlockHeader = $imgPreviewBlock.find("h2"),
$gallery = $("section#foto_gallery"),
$galleryBlock = $gallery.find("ul"),
$galleryItems = $galleryBlock.find("li"),
$galleryItemsLength = $galleryItems.length,
$galleryImg = $galleryItems.find("img"),
$transitionClass = $("section#foto_gallery ul li figure figcaption").css({"transition": "all 0.2s ease"});


$mainProductFoto.attr("src", $activeImgSrc);

//функция смены картинки для главной картинки блока с товаром

function changeImg() {

var $this = $(this),
$newFoto = $this.attr("src");

if ($foto.hasClass("main")) {

$mainProductFoto.attr("src", $newFoto);
$foto.removeClass("main");
$this.addClass("main");

}

}

//функция просмотра картинки

function openFotoPreview() {

var $this = $(this),
$actionImg = $this.find("img"),
$apt = $actionImg.parents("li"),
$imgNumber = $apt.index() + 1,
$app = $apt.find("p"),
$actionGalleryTitle = $app.html(),
$fotosrc = $actionImg.attr("src"),
$imgPreviewWidth = $imgPreview.width(),
$imgPreviewHeight = $imgPreview.height();


$imgPreview.addClass("position");

//определяем размермы картинки и делаем для них стили

if ($imgPreviewWidth > $windowWidth) {

$imgPreview.css({
"width": "100" + "%",
"height": "auto"
});

} else if ($imgPreviewWidth < $windowWidth) {

$imgPreview.css({
"width": "auto",
"height": "100" + "%"
});

}



//закончили, и открываем по клику блок просмотра картинки

if ($this.hasClass("main_product_foto")) {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.show();
$previewCounter.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewHeader.html($sectionProductHeader);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);

} else if ($this.hasClass("gallery")) {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.hide();
$previewCounter.show();
$imgPreviewBlockTitle.show();
$previewCounter.html($imgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);
$actionImg.addClass("gallery_active_foto");
$imgPreviewBlockTitle.html($actionGalleryTitle);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);

} else {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.hide();
$previewCounter.hide();
$imgPreviewBlockHeader.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);
}

}

function fotoPreviewControl() {

var $this = $(this),
$activeFoto = $foto.filter(".main"),
$activeFotoSrc = $activeFoto.attr("src"),
$activeLi = $activeFoto.parents("li"),
$nextLi = $activeLi.next(),
$nextFoto = $nextLi.find("img"),
$prevLi = $activeLi.prev(),
$prevFoto = $prevLi.find("img"),
$firstLi = $productFotoBlockLi.first(),
$firstFoto = $firstLi.find("img"),
$lastLi = $productFotoBlockLi.last(),
$lastFoto = $lastLi.find("img"),
$allImages = $("img"),
$activeGalleryFoto = $allImages.filter(".gallery_active_foto"),
$activeGalleryItem = $activeGalleryFoto.parents("li"),
$firstGalleryItem = $galleryItems.first(),
$firstGalleryFoto = $firstGalleryItem.find("img"),
$lastGalleryItem = $galleryItems.last(),
$lastGalleryFoto = $lastGalleryItem.find("img"),
$nextGalleryItem = $activeGalleryItem.next(),
$nextGalleryFoto = $nextGalleryItem.find("img"),
$prevGalleryItem = $activeGalleryItem.prev(),
$prevGalleryFoto = $prevGalleryItem.find("img"),
$nextGalleryTitle = $nextGalleryItem.find("p"),
$nextGalleryTitleText = $nextGalleryTitle.html()
$prevGalleryTitle = $prevGalleryItem.find("p"),
$prevGalleryTitleText = $prevGalleryTitle.html(),
$firstGalleryTitle = $firstGalleryItem.find("p"),
$firstGalleryTitleText = $firstGalleryTitle.html()
$lastGalleryTitle = $lastGalleryItem.find("p"),
$lastGalleryTitleText = $lastGalleryTitle.html(),
$firstImgNumber = $firstGalleryItem.index() + 1,
$lastImgNumber = $lastGalleryItem.index() + 1,
$nextImgNumber = $nextGalleryItem.index() + 1,
$prevImgNumber = $prevGalleryItem.index() + 1;



if ($this.hasClass("right")) {

if ($activeGalleryFoto.hasClass("gallery_active_foto" )) {

if ($nextGalleryFoto.length) {

$nextGalleryFotoSrc = $nextGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$nextGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($nextGalleryTitleText);
$previewCounter.html($nextImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

} else {

$nextGalleryFotoSrc = $firstGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$firstGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($firstGalleryTitleText) ;
$previewCounter.html($firstImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

}

} else {

if ($nextFoto.length) {

$nextFotoSrc = $nextFoto.attr("src");
$foto.removeClass("main");
$nextFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);


} else {

$nextFotoSrc = $firstFoto.attr("src");
$foto.removeClass("main");
$firstFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);

}

}

} else if ($this.hasClass("left")) {

if ($activeGalleryFoto.hasClass("gallery_active_foto" )) {

if ($prevGalleryFoto.length) {

$nextGalleryFotoSrc = $prevGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$prevGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($prevGalleryTitleText);
$previewCounter.html($prevImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);


} else {

$nextGalleryFotoSrc = $lastGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$lastGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($lastGalleryTitleText);
$previewCounter.html($lastImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

}

} else {

if ($prevFoto.length) {

$nextFotoSrc = $prevFoto.attr("src");
$foto.removeClass("main");
$prevFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);

} else {

$nextFotoSrc = $lastFoto.attr("src");
$foto.removeClass("main");
$lastFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
}

}

} else if ($this.hasClass("close")) {

$imgPreview.removeClass("position");
$imgPreview.attr("src", "");
$activeGalleryFoto.removeClass("gallery_active_fot o");
$mainProductFoto.attr("src", $activeFotoSrc);
$imgPreviewBlock.hide();

}
}

$foto.on("touchstart, click", changeImg);
$openFotoPreview.on("touchstart, click", openFotoPreview);
$fotoControlButtons.on("touchstart, click", fotoPreviewControl);
});

Доброго времени суток, суть вопроса проста, не мгу сделать так, что бы картинка выводилась с нужными css свойствами. Нужно что бы в зависимости от соотношения размеров экрана и картинки, последняя выводилась либо на всю высоту, если ширина картинки меньше ширины экрана, либо на всю ширину.