Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save HoldenCreative/d840faf3c7e9c5988390 to your computer and use it in GitHub Desktop.
Save HoldenCreative/d840faf3c7e9c5988390 to your computer and use it in GitHub Desktop.
Full-width image using calc() and vw

Full-width image using calc() and vw

A method for making an image within a padded container full-width. CSS3 alternative to wrapping the image within a container with negative margins, or revising the HTML/CSS rules to give other child elements margins or padding.

A Pen by Andrew J. Holden on CodePen.

License.

<div class="container">
<img class="" src="http://holdencreative.com/wordpress/wp-content/uploads/2014/12/potato-731x510.jpg" />
<h2>Calc and vw rules</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa facilis, labore debitis nesciunt ipsam odio corporis architecto reiciendis voluptas ab quibusdam ratione rerum tempore voluptatibus libero cumque dignissimos vero hic!</p>
</div>
* { box-sizing: border-box; }
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
body {
font-family: 'Source Sans Pro', sans-serif;
background: #ccc;
}
h2 {
font-size: 1.5em;
line-height: 1.5rem;
text-transform: none;
}
p {
font-size: 1rem;
line-height: 1.5rem;
}
.container {
width: 300px;
margin: 1rem;
padding: 1rem;
background: #f5f5f5;
color: #454545;
border: 1px solid #3F51B5;
overflow: hidden;
}
.fullwidth-for-small {
margin: 0 -1rem;
}
img {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: auto; /* fallback */
max-width: 100%; /* fallback */
width: calc(100% + 2em); /* modern browsers */
max-width: 100vw; /* assumes content is full viewport width */
position: relative;
left: -1em;
right: -1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment