Прокрутка для изображений

Всем, доброго времени суток. Хочу предложить вам попробовать прокрутку для изображений на CSS. Она может пригодится в качестве фото галереи, которая позволит скроллить картинки не обрезая их. Точно заполняя область просмотра.
Нужно только задать определённый размер. Посмотрите рабочий вариант здесь.

Для начала создадим самый простой HTML код. Подготовьте несколько картинок которые будут отображаться в галерее. Они все должны быть одинакового размера, чтобы смотрелось всё аккуратно.

<div class="gallery">
    <img src="адрес картинки.jpg" alt=" название"/>
    <img src=" адрес картинки.jpg" alt="название"/>
    <img src="адрес картинки .jpg" alt="название"/>
    <img src=" адрес картинки.jpg" alt="название"/>
    <img src=" адрес картинки.jpg" alt="название"/>
</div>

Картинок может быть сколько угодно. Добавляйте дополнительные строки -

<img src="адрес картинки.jpg" alt=" название"/>

И вот такой код CSS.

<style>
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px;
 
    }
.gallery {
    width: 500px;
    height: 355px;
    overflow-y: hidden;
    overflow-x: auto;
      white-space: nowrap;
    letter-spacing: -.25em;
    }</style>

Синим я выделила размеры галереи, которые строго соответствуют размерам ваших изображений.

Оба кода устанавливаем в нужном месте сообщения в режиме HTML или в гаджет.
Обращу ваше внимание на то, что в разных браузерах она по разному себя ведёт. Попробуйте.

Такая простая галерея, в виде полосы прокрутки и без всяких наворотов, позволит компактно отобразить ваши изображения, сохраняя место на странице.

Спасибо всем за внимание и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email