изменить изображение вручную как размер окна

Я использовал js для установки ширины и высоты изображения в зависимости от размера окна. Но в некоторых случаях, когда браузер очень широк, высота изображения превышает всю высоту его отца. В результате нижняя часть изображения не отображается. Как я могу это решить?изменить изображение вручную как размер окна

Я использовал бутстрап и swiper в этом проекте, и изображение, которое я хочу изменить, находится внутри моего подразделения swiper. Я установил и все высоты отцовских элементов изображения до 100%. Вот мой js-код для изменения - это изображение по-диматически. Размер изображения: 2560 * 1440.

if(winWidth/winHeight < 2560/1440) { 
    imgHeight = winHeight; 
    imgWidth = winHeight/1440 * 2560; 
    }else { 
    imgWidth = winWidth; 
    imgHeight = winWidth/2560 * 1440; 
    } 
    attr = "width:" + imgWidth + 'px;height:' + imgHeight + 'px;margin-left: -' + imgWidth/2 + 'px;margin-top:-' + imgHeight/2 + 'px'; 
    $('.main .swiper-slide > img').attr('style',attr);

PS: Жаль, что я не сделал это ясно. Следующие методы, которые вы указали, уменьшают изображение вниз в вертикальном разрезе и, таким образом, оставляют на странице незаполненным. На самом деле, я хочу, чтобы высота моего изображения занимала всю высоту окна, независимо от вертикального окна или горизонтального окна. И если окно достаточно широкое, ширина изображения равна ширине окна, в противном случае разрезают изображение по ширине и делают его равным ширине окна.

источник

2016-05-27 JenkinsY

2c: это неправильное использование Javascript, и вы обязательно столкнетесь с такими странными ошибками. Попробуйте использовать CSS для вашего изображения как относительного размера его родителя. Если размер не вычисляется, вы должны использовать разные типы контейнеров (например, div вместо span). – patstuart

@patstuart Я хочу изменить изображение в соответствии с форматом окна, а не шириной окна. может ли CSS использоваться для достижения этого? PS: Я изменил 6-ю строку кода на 'imgHeight = windth/2560 * 1300', и он решил мою проблему. Хотя это нехорошее решение. – JenkinsY

@ JenkinsY как насчет использования блоков vh и vw? Это% от высоты и ширины соответственно, таким образом, вы можете сохранить одинаковое соотношение сторон, как окно – LordNeo

@patstuart Правильно, это намного лучше обрабатывается непосредственно через CSS. Удивительно, сколько проблем с дизайном (go figure) можно решить без написания одной строки JavaScript. Поэтому, чтобы ответить на ваш второй вопрос, давайте выясним, как это можно сделать с помощью CSS. Не увидев скрипку или вашу фактическую страницу/изображение, я просто буду стрелять из бедра. Если я правильно понимаю, вы хотите, чтобы полное изображение отображалось с правильным соотношением независимо от ширины и высоты экрана. Если это так, вот хороший маленький трюк:

.main .swiper-slide { 
    width: 100%; 
    height: 0; 
    /* Padding bottom should be the height's ratio to the width. 
    Which in this case, would be 56.25% */ 
    padding-bottom: 56.25%; 
} 
.main .swiper-slide > img { 
    width: 100%; 
}

То есть, как соотношение сторон может быть обработан с помощью CSS. Сообщите мне, если это решит вашу проблему или у вас возникнут другие вопросы. CSS был создан для стилизации, поэтому всегда ищите решение там в первую очередь.

источник

2016-05-27 05:17:28

изменить изображение вручную как размер окна

ответ

Смежные вопросы