Картинка на всю ширину в Markdown
Время чтения: 1 минута
Небольшой хак для тех, кто хочет делать посты с картинками во всю ширину экрана как было модно на medium.com. Например, как тут:
|
|---|
| Статья: https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67 |
markdown
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>
И в таком случае в css понадобится прописать:
.full-image + img {
...
width: 100%;
}У себя в теме я использую Grid Layout, поэтому к этому правилу добавилось еще и:
.full-image + img {
width: 100%;
grid-column: 1 / 13;}