Адаптивное выравнивание изображений в CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное выравнивание изображений в CSS (Адаптивное выравнивание изображений на всю ширину браузера)

Адаптивное выравнивание изображений в CSS

Kosten

Среда, 21 Августа 2019 | Сообщение 1

Администраторы

Сообщений:44342

Награды: 70

« 555 »

Рассмотрим не сложный пример как адаптивно выстроить несколько картинок или изображений, которые выстроятся на на всю ширину окна браузера. Это отличное решение поможет веб разработчику поставить изображение, которое бы смотрелось корректно на большом мониторе, а также на мобильных аппаратах, где уже будет по всей ширине. Если изначально мы делаем в 2 колонки, то на экране они уже по всей ширине в вертикальном положение.

Две картинки по горизонтали:

Идет в в колонку, где будет автоматически на всю ширину, при уменьшение изображение автоматически меньше по размеру становится.

HTML

Код

CSS

Код

.adaptivnos-kartinki {
    text-align: center;
    margin: 0 0 20px 0;
    overflow: hidden;
}
.adaptivnos-kartinki a {
    width: 50%;
    display: block;
    float: left;
    line-height: 0;
}
.adaptivnos-kartinki img {
    width: 100%;
    height: auto;
}

Также закреплена demo страница.

Демонстрация

Три картинки по горизонтали:

HTML

Код

CSS

Код

.adaptivnos-kartinki {
    text-align: center;
    margin: 0 0 20px 0;
    overflow: hidden;
}
.adaptivnos-kartinki a {
    width: 33.3%;
    display: block;
    float: left;
    line-height: 0;
}
.adaptivnos-kartinki img {
    width: 100%;
    height: auto;
}

На этом все!

Четыре картинки:

HTML

Код

CSS

Код

.adaptivnos-kartinki {
    text-align: center;
    margin: 0 0 20px 0;
    overflow: hidden;
}
.adaptivnos-kartinki a {
    width: 25%;
    display: block;
    float: left;
    line-height: 0;
}
.adaptivnos-kartinki img {
    width: 100%;
    height: auto;
}

На этом установка завершена.

Осталось прописать медео, чтоб все эти изображение стали адаптивны для мобильный гаджет, что и делаем.

Для мобильных:

CSS

Код

@media screen and (max-width: 800px) {
.adaptivnos-kartinki a {
width: 100%;
float: none;
}
}

Прописываем стиль к выбранному варианту, где автоматически на небольшом экране картинка растягивается, только вертикальном положение становятся.

Прикрепления: 7861318.jpg (63.5 Kb) · 9178512.jpg (56.3 Kb) · 1646521.jpg (54.0 Kb) · 0193721.jpg (35.6 Kb)

Страна: (RU)

Страница 1 из 1
1