Как сделать даптивный банер с абсолютным позиционированием?

Question

[codymaverick]

Есть блок со строгой шириной 1064px. В нём нужно отпозиционировать посередине баннер шириной 1425px. Баннер должен сжиматься до ширины 1064px. Как это реализовать?

<div class="main-banner">
      <a class="main-banner__link"  href="products"><img src="img/temp/main-banner.png" alt=""></a>
    </div>

.main-banner {
  width:1435px;
  position: absolute;
  height: 596px;
  left: 50%;
  transform: translate(-50%, 0%);
}

Comments

[Конан Варвар]

"Есть блок со строгой шириной 1064px. В нём нужно отпозиционировать посередине баннер шириной 1425px." - на этой фразе у меня произошел мелкий взрыв. Как можно в блок шириной 1064px поместить баннер шириной 1425px?

Answer 1

[Андрей]

Как-то размыта проблема. Блок у тебя в коде, по крайней мере, по вертикали отцентрован.
https://jsfiddle.net/ugb2uLdb/2/
Что бы сжать его в пределах родителя, не знаю, задай ему max-width: 100%;
https://jsfiddle.net/ugb2uLdb/3/
Что бы баннер не сжимался, а обрезался задай родителю overflow: hidden;
https://jsfiddle.net/ugb2uLdb/4/