CODEWITHSUNDEEP
htmlcss
Shane
Shane

Reputation: 1640

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? The example site is at shaneofalltrades.com.

Upvotes: 0

Views: 1303

Answers (1)

fanfavorite
fanfavorite

Reputation: 5199

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%;
}

Upvotes: 1

Related Questions