[Krakozavr]

Dilettante_Pro,
спасибо огромное что возитесь со мной
что-то идет не так. В тесте всё работает как часы, но в реальном сайте скрипт игнорируется, всё масштабирование идет по правилам, определенным в CSS. Более того - когда я масштабирую окно с выделенным в открытом инспекторе длементом IMG - я вижу, что в процессе изменения размеров окна картинка масштабируется по правилу скрипта при изменении высоты (в обычной раскладке), и в инспекторе мелькают в свойствах элемента правильные размеры, но как только отпускаю окно - все становится "по умолчанию".

в мобильной раскладке (масштаьирование по ширине) и этого не видно

вот итоговый код:

<!-- gallery description -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(window).on('load resize', function () {
        var width = $(window).width(),
            height = $(window).height();
var target = $('div[data-slide-url="gallery-description"]').children('img');
        if (width <= 800) {
            target.css({ "height": "400px", "width": "100%" });
        }
        else {
            if ((width > 800) && (height >= 700)) {
                target.css({ "height": "", "width": "" });
            }
            else {
                target.css({ "height": "400px", "width": "400px" });
            }
        }
    });
</script>
<!-- end gallery -->

вот на всякий случай фрагмент моего кастомного CSS, описывающий галерею для размера экрана, соответствующего установленному в скрипте:

@media only screen and (max-height:700px){.collection-type-gallery #slideshow{height:400px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 400px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 11pt;}.site-title .logo {font-size: 31pt;}.logo-subtitle {font-size: 10pt;} #header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 10pt; padding-left: 50px; } body {font-size: 12pt; }
div.image-description { top: -30px; margin-top: 0px; background-color: white; background: white;  margin-left: 40px; margin-right: 3px; }
.collection-type-gallery #slideshow .slide .image-description strong {
font-size: 18pt; color: #bbbbbb; font-weight: bold; line-height: 80%;}

.collection-type-gallery #slideshow .slide .image-description p {font-size: 11pt; margin-bottom: 5px; color: black; line-height: 116%;}}

Ест подозрение, чт это связано с указанием в оригинальном коде размеров элементов с маркером !important В инспекторе это выглядит например, так:

@media only screen and (max-width: 800px)
#slideshowWrapper.mobile-gallery #slideshow .slide img {
    position: static !important;
    height: auto !important;
    width: 100% !important;

Прорбовал лобавлят !important в скрипт, но тогда он совсем перестает работать, и в примере тоже