Creates a full-width image.
- Use
left: 50%andright: 50%to position the image in the middle of the parent element. - Use
margin-left: -50vwandmargin-right: -50vwto offset the image on both sides relative to the size of the viewport. - Use
width: 100vwandmax-width: 100vwto size the image relative to the viewport.
预览
Lorem ipsum dolor sit amet
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.
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.
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;
}