Categories

Новые шаблоны

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона

Guillaume Dumas Май 22, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как изменить размеры слайдера (slides dimensions) в JS-анимированном шаблоне для мобильных устройств для того, чтобы изображения сохраняли свои пропорции и не обрезались по бокам.

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона

По умолчанию, слайды обрезеются по бокам на небольших экранах, таких как экран мобильного телефона. Это позволяет максимизировать высоту слайдера: JS_Animated._How_to_prevent_slide_images_from_being_cut_off_on_the_mobile_views-1

Простые изменения CSS позволят сохранить изначальные пропорции изображений слайдера.

Для того чтобы изменить размеры слайдера для мобильных устройств, Вам необходимо сделать следующее:

  1. Откройте файл css/camera.css.js и прокрутите вниз страницы.

  2. Добавьте следующий код, который изменит размеры изображений для мобильных устройств и правильно разместит их в слайдере:

    			@media (max-width: 768px) {
    			.slider img {
    			width: 100% !important;
    			height: auto !important;
    			margin-left: 0 !important;
    			}
    			}
    		
  3. Добавьте следующий код, который изменит высоту слайдера для того, чтобы удалить свободное место под изображениями слайдера:

    			@media (max-width: 479px) {
    			.camera_wrap {
    			height: 126px !important;
    			}
    			}
    		
  4. Сохраните изменения в файле css/camera.css.js и загрузите его на сервер.

    Результат должен выглядеть следующим образом:

    JS_Animated._How_to_prevent_slide_images_from_being_cut_off_on_the_mobile_views-2

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона
Эта запись была размещена в JS Animated туториалы и помечена как cut, HTML, images, mobile, slider. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов