CSS: дизайн «Bleeding edge». Как?

Я хочу воссоздать дизайн, подобный веб-сайту Fantastical (https://flexibits.com/фантастический), где край скриншота выходит за пределы страницы, и когда пользователь изменяет размер окна, открывается больше скриншота. Кроме того, когда ширина действительно мала, размер скриншота также уменьшается. Вот несколько иллюстраций, иллюстрирующих мое плохое описание:

Вот код, который у меня получился, надеюсь, он будет полезен другим:

    &.accounts {
      display: block;
      margin: 0 auto;
      height: auto;

      .text {
        width: auto;
        padding: 0;
        text-align: center;
      }

      .image {
        width: auto;
        height: 300px;
        background-image: url('/assets/scrn-accounts.png');
        background-repeat: no-repeat;
        background-position: 100px 0;
        background-size: cover;
        margin: 20px 0;
      }

    }

Какой у Вас вопрос? Это не бесплатная служба написания кода.

— 18.03.2019 16:54

Ожидается, что вы, по крайней мере, попытаетесь закодировать это для себя. Я бы посоветовал вам сделать дополнительные исследования либо через Google, либо с помощью поиска SO, сделать попытку и. если у вас все еще есть проблемы, вернитесь с ваш код и объясните, что вы пробовали.

— 18.03.2019 16:56

Первое, что приходит на ум, это использовать position: absolute и что-то вроде left: 70%, чтобы отодвинуть изображение в сторону.

— 18.03.2019 17:07

jquery html css responsive

18.03.2019 16:52

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

294

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы добиться чего-то вроде скриншотов, которые вы предоставили, вы можете создать простую сетку из двух столбцов и указать правый столбец background-image вашего скриншота. По мере того, как вы увеличиваете/уменьшаете окно, будет отображаться больше или меньше снимка экрана.

.grid {
  display: flex;
  max-width: 1024px;
  margin: 0 auto;
}
.grid-item {
  width: 50%;
}
.text {
  padding: 40px 10px;
}
.image {
  background-image: url('http://placekitten.com/800/400');
  background-size: cover;
  margin: 20px 0;
}

<div class = "grid">
  <div class = "grid-item text">
    <h1>Content goes here</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis lectus sed risus auctor pellentesque. Proin sed purus velit. Vivamus vehicula bibendum mi euismod ornare. Proin non lacus varius lorem tempor ullamcorper at eu eros. Quisque ullamcorper dui id sodales interdum. Curabitur rhoncus, erat et sollicitudin auctor, odio nibh lacinia dui, eu tincidunt tellus turpis fringilla ipsum. Aliquam consectetur augue malesuada dolor viverra tempor. Suspendisse ornare. </p>
  </div>
  <div class = "grid-item image">
  </div>
</div>

Спасибо за совет, я опубликую свой окончательный код в исходном вопросе.

— 18.03.2019 21:51

18.03.2019 17:36