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

прокрутка изображений
Всем, доброго времени суток. Хочу предложить вам попробовать прокрутку для изображений на 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


4 комментария:

  1. Привет, Вика. Ещё один вариант компактного расположения картинок. Спасибо. Мне показалось немного неудобной прокрутка. Или я что-то не так делала. Удачи!

    ОтветитьУдалить
    Ответы
    1. Привет, Люба. А что именно неудобно было. То что это не на автомате. Тут ползунком только. Вообще все такие полосы прокрутки подразумевают использование JS. А тут CSS в чистом виде.

      Удалить
  2. Да, ползунком, наверное, не очень привычно. Для разнообразия хорошо. А вот что такое JS, к сожалению, не знаю.

    ОтветитьУдалить
    Ответы
    1. Понятно сейчас. Я пробовала сделать так большого размера картинки-здорово смотрится. Я писала про JS Java требует больше времени для загрузки., Здесь код легче.

      Удалить

Пользовательский поиск