Пропорциональное изменение изображения при адаптиве
Смотрел видеоурок Адаптивная верстка на 1:39:50-1:43:10. Там изображение менялось с 
на 
А хотелось бы чтобы изображение изменялось в размерах как на Пример (см. этот момент @ЕвгенийКулик) 
на 
Код смотри на Редактируемое адаптивное изображение. Подскажите как добиться изменения размеров изображения (см. Редактируемое адаптивное изображение) как рисунка с надписью HERO TEXT. При background-size: cover получается следующее 
при уменьшении 
Я исправил в моем коде на вышеупомянутой странице object-position: right на object-position: center и в результате при уменьшении окна браузера получаю следующую картинку (для пользователя @ЕвгенийКулик) 
Привожу код
/* Обнуление */ *, *::before, *::after < padding: 0; margin: 0; border: 0; box-sizing: border-box; >a < text-decoration: none; >ul, ol, li < list-style: none; >img < vertical-align: top; >h1, h2, h3, h4, h5, h6 < font-weight: inherit; font-size: inherit; >html, body < height: 100%; line-height: 1; background: #fafafa; font-size: 14px; color: #fff; font-weight: 400; font-family: Poppins; >.wrapper < min-height: 100%; overflow: hidden; display: flex; flex-direction: column; >._container < max-width: 1046px; padding: 0px 15px; margin: 0px auto; box-sizing: content-box; >._ibg < /*position: relative;*/ >._ibg img < position: absolute; width: 100%; height: 100%; top: 0; right: 0; object-fit: cover; object-position: center; >/* =========================================================================== */ .page < >.page__main-block < >.main-block < position: relative; height: 100vh; min-height: 811px; >.main-block__container < /* background-image: url("../img/mainblock/mainimage.png"); background-size: 100% 100%; height: 811px; */ /*width: 1441px;*/ position: relative; z-index: 2; >.main-block__logo < >.main-block__body < /*margin-top: 22px;*/ width: 50%; /*display: flex; flex-direction: column;*/ >/* @media (max-width: 100vw) < .main-block__body < display: flex; flex: 0 1 50%; flex-direction: column; >> */ .main-block__smalltitle < /*position: relative;*/ height: 21px; margin-left: 166px; /*right: 83.77%;*/ /*top: calc(50% - 21px/2 - 195.5px);*/ margin-top: 130.96px; width: 100px; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; /* identical to box height */ /*color: #FFFFFF;*/ /*z-index: 10;*/ >.main-block__title < /*position: absolute;*/ margin-left: calc(166/1441*100vw); width: calc(616/1441*100vw); margin-top: 22px; /*bottom: 35.68%;*/ height: 222px; font-family: 'Poppins'; font-style: normal; font-weight: 700; font-size: 60px; line-height: 74px; /* or 123% */ /*color: #FFFFFF;*/ /*z-index: 10;*/ >.main-block__text < margin-top: 24px; margin-left: calc(166/1441*100vw); width: calc(581/1441*100vw); height: 55px; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; /*z-index: 10;*/ >.main-block__items < margin-top: 45px; margin-left: calc(166/1441*100vw); padding-bottom: 170px; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; >.main-block__link < height: 24px; >.main-block__link_yellow < color: yellow; >.main-block__image < position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >/* ============================================================================ */ .main-block__logo_name < width: 179.23px; height: 33.05px; /*margin-left: calc(230.2/1441*100%);*/ /*214.8px;*/ /*margin-top: 24px;*/ background: #FFFFFF; /*z-index: 15;*/ >.main-block__logo_hamburger_icon < /* margin-top: 23px; margin-right: calc(166/1441*100%); */ width: 40px; height: 40px; background: #ffffff; /*z-index: 15;*/ >.main-block__header < /* display: flex; justify-content: space-between; align-items: center; */ display: flex; justify-content: center; align-items: center; >.main-block__nav < padding-top: 42px; /* margin-left: calc(50% - 1155/(2*1441)*100%); margin-right: calc(50% - 1155/(2*1441)*100%); */ margin-left: auto; margin-right: auto; width: 1111px; /*1111px*/ /*flex: 1 1 calc(1155/1441*100%);*/ height: 43px; display: flex; align-items: center; justify-content: space-between; >
Webovio A place where
A creative agency for redemptive brands
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
-->
Get in touch link-->
@ЕвгенийКулик вот результат вашего кода до уменьшения окна 
вот после 
Должно быть как на 
Как сделать замену изображение при адаптации?
![My default image]()
А как два изображение подряд при адаптации было?
17 авг 2020 в 21:00
@Taras не понял вопроса
18 авг 2020 в 4:56
Осталось добавить source для изображений webp, чтобы «приличные» браузеры экономили трафик. type=»image/webp»
18 авг 2020 в 6:32
@МихаилКамахин Чтобы два изображение были подряд при адатации 1000px
18 авг 2020 в 9:16
@Taras такого picture , вроде, не может. Просто используйте медиазапросы и что-то скрывайте, что-то не скрывайте. Таким образом придётся использовать обычные img
18 авг 2020 в 12:59
ну если ты через css задаешь background то почему бы просто не поменять его с помощью медиа запроса, это самый простой вариант
Отслеживать
ответ дан 17 авг 2020 в 17:43
Andrey Freiz Andrey Freiz
751 5 5 серебряных знаков 17 17 бронзовых знаков
Если через css, как Андрей советует, вот отличный способ — внутри html документа, что-то типа:
Далее в стилях медиа-запросами менять видимость блока, вот и всё.
.PeKa @media (max-width: 960px) < .PeKa.Ne-PeKa >
Не забывай о приоритете очереди в css — сверху вниз от менее важных к более.
П.С.
Почему внутри HTML, а не всё в css. думаю, тут очевидно — таким образом ты сможешь уже с помощью JS или php менять картинки автоматом. хотя, тут так же можно использовать теги img и точно так же их показывать/скрывать. Разница в них очевидна: 1 — фон, 2 — блок/элемент. Ну и фон требует какого-то размера определённого. в общем, вариантов на самом деле много. Ищи такие решения на JS
Адаптивное фоновое изображение для сайта — делаем фоновое изображение адаптивным
Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:
Как это выглядит смотрите на реальном примере:
Посмотреть примерСкачать
Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:
Как сделать адаптивное фоновое изображение для сайта?
HTML часть
Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:
1 2 3 4 5 6 7 8 9
html> head> title>Заголовок страницы/title> /head> body> /body> /html>
CSS часть
Осталось только задать в файле стилей необходимые свойства, чтобы сделать задуманное — адаптивное фоновое изображение для сайта:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
body { /* Путь к изображению относительно данного файла */ background-image: url(../images/background-photo.jpg); /* Центрирование изображения по вертикали и горизонтали всегда */ background-position: center center; /* Запрещаем повтор изображения */ background-repeat: no-repeat; /* Фиксируем изображение - оно остается на месте при прокрутке окна */ background-attachment: fixed; /* Изображение будет масштабироваться в зависимости от размеров контейнера */ background-size: cover; /* Цвет фона изображения, который будет показываться пока изображение не загрузится */ background-color:#464646; /* Эквивалентная сокращенная запись * background: url(background-photo.jpg) center center cover no-repeat fixed; */ }
Все строки прокомментированы, поэтому я не думаю что с этим кодом могут возникнуть проблемы.
Но это еще не весь код. Так как скорость мобильного интернета ограничены, поэтому страницу нам необходимо оптимизировать в скорости загрузки. На странице находится изображение, которое достаточно большое. Но можно сделать так, чтобы для мобильных устройств загружалось другое изображение, которое меньше.
Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:
1 2 3 4 5 6 7 8 9
/* Для мобильных устройств */ @media only screen and (max-width: 767px) body { /* Если размер экрана меньше 767px показываем уменьшенное изображение, * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки * на мобильных устройствах */ background-image: url(../images/background-photo-mobile-devices.jpg); } }
Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.
Бонус к статьей «Где брать фоновые изображения?»
Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.
Вывод
Данный эффект очень актуален и его использование можно увидеть практически на каждой продающей странице.
Как сделать — Адаптивную сетку изображений
Узнайте, как создать галерею изображений, которая варьируется между четырьмя, двумя или полными изображениями ширины, в зависимости от размера экрана:
Создать адаптивную сетку изображений
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
С помощью CSS на основе создания адаптивной верстки:
Пример
.row <
display: flex;
flex-wrap: wrap;
padding: 0 4px;
>
/* Создайте четыре одинаковых столбца, которые находятся рядом друг с другом */
.column flex: 25%;
max-width: 25%;
padding: 0 4px;
>
.column img margin-top: 8px;
vertical-align: middle;
width: 100%;
>
/* Адаптивный макет — делает два столбца макет вместо четырех столбцов */
@media screen and (max-width: 800px) .column flex: 50%;
max-width: 50%;
>
>
/* Адаптивный макет — делает два столбца стека друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) .column flex: 100%;
max-width: 100%;
>
>
Совет: Зайдите на наш учебник Сетка изображений чтобы узнать, как создать интерактивную сетку, которая варьируется между столбцами.
Совет: Зайдите на наш учебник CSS Флексбокс, чтобы узнать больше о гибком модуле компоновки коробки.
--> --> 
--> --> 
--> A place where A creative agency for redemptive brands Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises. --> Get in touch link--> 
