How to make responsive in size a header image in a boilerplate, with CSS3 or HTML5?

I have Skeleton to be exact and an image as my header set as

<div class="sixteen columns">
<img src="images/shane10in.gif" alt="" />

and would like it to fill width and scale down. I could make it work in the deprecated width 100% in html, but I am trying to find a new way of doing this in either CSS3 or HTML5, possibly a canvas? Th开发者_开发问答e example site is at shaneofalltrades.com.

This what you are looking for? Resize HTML5 canvas to fit window

width: 100% in CSS is not deprecated. It is for HTML5, but not CSS. The idea is to have clean HTML and control many things through CSS.

or did you want something like this:

.sixteen {
  width: 960px;
  height: 320px;
}

.sixteen img {
  width: 100%;
}