<p class="wrap">

	Take a look at the second image below
	<img src="https://images.unsplash.com/photo-1528368926401-c5a53c66e2b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.
	Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia.

	<img class="img-fullscreen extra" src="https://images.unsplash.com/photo-1528368926401-c5a53c66e2b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

	Mauris est dolor, consequat sit amet ante ac, lobortis accumsan dui. In hac habitasse platea dictumst. Aenean nec velit et nibh cursus blandit. Nam nec augue quis nulla hendrerit consectetur a accumsan nulla.
	Aliquam ac dolor id nulla lobortis adipiscing id quis mauris. Duis arcu nunc, mollis a quam vel, aliquam dignissim neque. Maecenas magna dui, dignissim quis felis sed, tincidunt molestie magna. Proin semper felis in dolor commodo, quis facilisis lorem facilisis.
	Vestibulum lorem quam, varius eget ipsum vel, lacinia laoreet lorem. Ut posuere elit non convallis blandit. Donec commodo fermentum neque, at sagittis libero faucibus nec. Nam dictum imperdiet dolor vel tincidunt.

</p>
.img-fullscreen {
	max-width: 100vw;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.extra {
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

/* Demo's CSS */
/* apply a natural box layout model to all elements, but allowing components to change */
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
	font-size: 62.5%;
	height: 100%;
	min-height: 100%;
	max-width: 100%;
}

body {
	margin: 0;
	height: 100%;
	min-height: 100%;
	background-color: #0092f9;
	margin: 0;
	font: 300 2.5rem/1.5 "Lato", sans-serif;
	max-width: 100%;
}

img {
	margin: 30px 0;
	width: 100%;
	min-width: 100%;
	height: auto;
}

.wrap {
	background: #fff;
	margin: 0 auto;
	padding: 30px;
	width: 100%;
	max-width: 70rem;
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

This Pen doesn't use any external JavaScript resources.