Позиционирование блоков. изображение вне контейнера?

Question

[Pazzetif]

Требуется помощь. Нужно сделать вот так: 12 колонок, левая часть в контейнере. Картинка соответственно нет. Пробовал position:absolute Не то, при небольшом уменьшении экрана картинка наезжает на левый блок.

<div class="offer">
        <div class="container">
            <div class="offer-item">
            <h1> <span>Разработка<br></span>
                контекстной<br>
                рекламы</h1>
            <ul class="offer-list">
                <li></li>
               <li></li>
                <li>></li>
                <li></li>
            </ul>
            <a class="button" href="#">Оставить заявку</a>
            </div>
        </div>
        <div class="offer-item">
        <div class="offer-back">
            <img src="img/offer-back.png" alt="offer-img">
        </div>
        </div>

    </div>

.offer {
	position: relative;

}
.offer-back {
	position: absolute;
	top: 0px;
	right: 0;
	bottom: 200px;
}

Если без position: absolute то, пробовал display:flex для .offer Тогда левый блок уезжает


Если же взять все в контейнер то, картинка становиться мелкой при flex. Убрать у нее max-width: 100%, размер нормальный, но при адаптиве обрезается..

Comments

[Froggyweb]

для начала нужно определить для себя поведение картинки и блока, а затем верстать. А то так мелкая, так обрезается... а как надо?

[Pazzetif]

Froggyweb, На планшетных экранах я ее вообще скрою. Сейчас она должна стоять в таком же размере как на скрине, и хотя бы при не большом сужении экрана она пропорционально уменьшалась. Вот как на последнем скрине вроде все ок, но контейнер левый уехал.