<div class="container">
  <figure>
    <img src="http://images.freeimages.com/images/previews/7e7/st-peter-s-cathedral-1212836.jpg" alt="The dome of St Peter's Cathedral">
    <figcaption>St Peter's Cathedral - <a href="http://www.freeimages.com/photo/st-peter-s-cathedral-1212836">Jacqueline Fouche</a></figcaption>
  </figure>
</div>

/*
Set Width and Border
*/
.container{
  width: 400px;
  border: 6px solid #111;
}

/*
Add some space between the border;
*/
figure{
  margin: 10px;
}

/*
Give the caption a distinct style.
*/
figcaption{
  font-family: arial, helvetica, sans-serif;
  padding: 10px;
  font-weight: bold;
  background:#111;
  color: #fff;
}

/* 
Responsive Image
The image will scale with the size of it's container
*/
figure img{
  width:100%;
  height: auto;
  display: block;
}