Картинка на всю ширину в Markdown

Время чтения: 1 минута

Небольшой хак для тех, кто хочет делать посты с картинками во всю ширину экрана как было модно на medium.com. Например, как тут:

Full width image
Статья: https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67

markdown

![Full width image](/uploads/cornelius-dammrich-52hz-shot-a-web-high.jpg)

css

img[alt~="full"] {
    position: relative;
    right: 50%;
    left: 50%;
    display: block;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
}

Способ “побега” из контекста может быть другим, важная часть находится в этом куске кода:

img[alt~="full"] {
    ...
}

Эта запись означает, что будут выбраны все картинки, содержащие в атрибуте alt слово full. Таким образом мы описали картинку на случай, если её не будет и использовали возможности alt для стилизации.

Обновление от 4.01.2020

Markdown не запрещает использование html-тегов в разметке, поэтому можно добавить в свой файл что-то вроде:

<div class="full-image"></div>

![Full width image](/uploads/cornelius-dammrich-52hz-shot-a-web-high.jpg)

И в таком случае в css понадобится прописать:

.full-image + img {
  ...
  width: 100%;
}

У себя в теме я использую Grid Layout, поэтому к этому правилу добавилось еще и:

.full-image + img {
  width: 100%;
  grid-column: 1 / 13;}
Работает на , деплоится через