Как сделать изображение адаптивным css

Пропорциональное изменение изображения при адаптиве

Смотрел видеоурок Адаптивная верстка на 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-->