Nikita Makhov

Full image in markdown

February 03, 2019

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

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

markdown

![Full width image](./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 для стилизации.