@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%);
}
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
@m1roku
Начинающий
Как-то размыта проблема. Блок у тебя в коде, по крайней мере, по вертикали отцентрован.
https://jsfiddle.net/ugb2uLdb/2/
Что бы сжать его в пределах родителя, не знаю, задай ему max-width: 100%;
https://jsfiddle.net/ugb2uLdb/3/
Что бы баннер не сжимался, а обрезался задай родителю overflow: hidden;
https://jsfiddle.net/ugb2uLdb/4/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
Wanted. Санкт-Петербург
До 180 000 ₽
11 нояб. 2024, в 17:43
50000 руб./за проект
11 нояб. 2024, в 17:10
500 руб./в час
11 нояб. 2024, в 16:42
2000 руб./за проект