0

CSS:

.FlRBK2 { 
    position: relative;
    margin-top: 8px;

}
.FlRBK2 {
    img {
    display: block;
    position: absolute;
    max-width: 100%;
    }
}
.MainText {
    position: absolute;
}

HTML:

<main>
    <div class="FlRBK2">
        <div class="FlorensImage"><img src="/Images/Adidas/Florens_RBK2.jpg" alt="FlorensRBK2"></div>
        <section class="MainText"><p>Always Be Powerfull for new wins</p></section>
    </div>
</main>

Каким образом можно расположить картинку по центру всего сайта так, чтобы при изменении размера сайта картинка уменьшалась вместе с ним, а не обрезалась? У меня она получилась адаптивной, но по центру расположить я ее не смог. Свойства: margin-left: auto; margin-right: auto;
не работают

FLRBK2

4
  • это скрин такой или у картинки справа белая область? 1 мая 2019 в 17:01
  • справа это белая область. Можно ли как-то расположить картинку по центру всего сайта так, чтобы при уменьшении ширины сайта, картинка не обрезалась, а была адаптивной и подстраивалась под размеры?
    – Flandered
    1 мая 2019 в 18:06
  • с учетом этой белой области или нет? нарисуйте макет с красными лигиями для ясности 1 мая 2019 в 18:10
  • Я обновил картинку в вопросе
    – Flandered
    2 мая 2019 в 7:41

1 ответ 1

0

Вам нужно для родительского контейнера, где лежит эта картинка задать ширину в процентах, а для изображения max-width: 100%. Тогда контейнер будет уменьшаться вместе с экраном и изображение вместе с ним

header {
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.1);
}

.cover {
  width: 60%;
  margin: 25px auto;
}
.cover img {
  max-width: 100%;
}
<main>
  <header></header>
  <div class="cover">
    <img src="https://images.unsplash.com/photo-1554656546-249b3cf64e15?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
  </div>
</main>

1
  • Благодарю за помощь
    – Flandered
    3 мая 2019 в 12:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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