<h1>100% Wide Container</h1>

<figure>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/chicago.jpg" alt="Chicago">
</figure>

<h1>75% Wide Container</h1>

 <figure class="figure-75">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/chicago.jpg" alt="Chicago">
</figure>

 <h1>50% Wide Container</h1>

 <figure class="figure-50">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/chicago.jpg" alt="Chicago">
</figure>
body {
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 {
  color: #9799a7;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}
figure {
  margin: 0 0 24px 0;
}
.figure-75 {
  width: 75%;
}
.figure-50 {
  margin-bottom: 0;
  width: 50%;
}
img {
  display: block;
  max-width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.