0

Надпись при уменьшении ширины сайта съезжает влево, также размер надписи остается фиксированным. Вот как она выглядит на мобильных устройствах(картинка.1)

На ширине 1500px и больше все отображается хорошо. Можно ли как-то поместить надпись внутрь картинки и сделать ее адаптивной? Чтобы она никуда не съезжала и уменьшалась при изменение ширины в соответствие с картинкой. Или есть еще какой-нибудь способ сделать ее гибкой на малых устройствах?

Картинка.1

Вот как надпись должна отображаться

Картинка.2

HTML:

<main>
    <div class="FLRBK2_img"><img src="Images/Adidas/Florens_RBK2.jpg"></div>
    <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>

SCSS:

.FLRBK2_img {
    margin-top: 8px;
    text-align: center;
    position: relative;
}

.FLRBK2_img img {
    max-width: 100%;
}

.MainText {
    span {
        position: absolute;
        top: 130px;
        right: 550px;
        text-align: center;
        width: 100%;
        font-family: "Anton", cursive;
        font-size: 92px;
        color: rgba(14, 14, 14, 0.7);
        text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
    }
}

1 ответ 1

0

Картинки у меня нет, поэтому поставил рандомную.

codepen

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.FLRBK2_img {
  margin-top: 8px;
  text-align: center;
  position: relative;
}

.FLRBK2_img img {
  max-width: 100%;
}

.MainText span {
  position: absolute;
  top: 5%;
  left: 5%;
  font-family: "Anton", cursive;
  font-size: 92px;
  color: rgba(14, 14, 14, 0.7);
  text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
  width: max-content;
  text-align: center;
}
<main>
  <div class="FLRBK2_img"><img src="https://picsum.photos/1920/1080"></div>
  <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>
</main>

2
  • И что собственно изменилось? Текст как был зафиксированным, так он им и остался
    – Flandered
    5 мая 2019 в 19:03
  • @Flandered, картинка привязана к определенной области, при изменении размера экрана просто уменьшаете пропорционально размер шрифта и картинку...
    – meine
    6 мая 2019 в 1:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.