59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
---
|
|
title: Full-width image
|
|
tags: layout
|
|
author: chalarangelo
|
|
cover: yellow-white-mug-2
|
|
firstSeen: 2021-01-07T10:14:46+02:00
|
|
lastUpdated: 2021-01-07T10:14:46+02:00
|
|
---
|
|
|
|
Creates a full-width image.
|
|
|
|
- Use `left: 50%` and `right: 50%` to position the image in the middle of the parent element.
|
|
- Use `margin-left: -50vw` and `margin-right: -50vw` to offset the image on both sides relative to the size of the viewport.
|
|
- Use `width: 100vw` and `max-width: 100vw` to size the image relative to the viewport.
|
|
|
|
```html
|
|
<main>
|
|
<h4>Lorem ipsum dolor sit amet</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
|
|
lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
|
|
ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
|
|
eu, faucibus interdum felis.
|
|
</p>
|
|
<p>
|
|
<img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
|
|
</p>
|
|
<p>
|
|
Orci varius natoque penatibus et magnis dis parturient montes, nascetur
|
|
ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
|
|
gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
|
|
eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
|
|
Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
|
|
</p>
|
|
</main>
|
|
```
|
|
|
|
```css
|
|
main {
|
|
margin: 0 auto;
|
|
max-width: 640px;
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.full-width {
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
max-width: 100vw;
|
|
width: 100vw;
|
|
}
|
|
```
|