Full-width image using calc() and vw

Full-width-image-using-calc()-and-vw.markdown

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.

index.html

<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>

style.css

* { 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;
}