0

Как сместить изображение вправо и избежать горизонтальной прокрутки?

введите сюда описание изображения

Пример трюка который нашел

введите сюда описание изображения

Использую Bootstrap 4 и рад любым примерам

4
  • За прокрутку отвечает свойство overflow, задайте его тегу выше, ну или к body. А собственно зачем смещать, можно ведь просто обрезать саму картинку?
    – Bert
    17 фев 2019 в 11:33
  • overflow:hidden 17 фев 2019 в 11:34
  • Совсем скролл убирать не хочу. Картинка большая и например на разных устройствах она должна открываться с разным смещением. Видел на многих сайтах и ищу примеры. 17 фев 2019 в 11:35
  • Пример jivosite.ru/features 17 фев 2019 в 11:36

1 ответ 1

2

Может быть так? Есть вариант запретить только горизонтальный скролл.

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        color: #777;
        font-size: 16px;
      }
      .container {
        width: 90%;
        margin: 0 auto;
        padding: 5%;
        background: #444;
        overflow-x: hidden;
      }
      article {
        width: 90%;
        background: #111;
        padding: 5%;
        margin: 40px auto;
        position: relative;
      }
      article h2 {
        font-size: 54px;
        line-height: 60px;
      }
      article p {
        margin: 30px 0;
      }
      .moved {
        left: 50%;
      }
<section class="container">
      <article class="normal">
        <h2>Просто блок</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ab
          voluptates ullam est quis nam distinctio repudiandae atque, iusto
          nulla eaque provident!
        </p>
      </article>
      <article class="moved">
        <h2>Сдвинутый блок</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur,
          quis. Eos commodi odio molestias.
        </p>
      </article>
    </section>

Ваш ответ

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

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