0

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.

Shane
  • 1,629
  • 3
  • 23
  • 50
  • HTML5 may have deprecated width but did CSS3 do that too?? Maybe I'm confused. What is it that you exactly want to do?? Fill "entire" width of screen and scale down the image by how much? You mean your div is fixed at 940 px and you want the image within it to be more than that and fill the entire screen. Correct?? – PhD Aug 04 '11 at 19:37
  • I just want the image to fill the 960px 100%, then scale all the way down to 320px with everything else. – Shane Aug 04 '11 at 19:43
  • 1
    Unrelated but still important, you do know that you actually declared **2** classes on the div and not one, `sixteen` and `columns`, classes cannot be separated by spaces. – Madara's Ghost Aug 04 '11 at 19:52
  • 2
    you mean a class name cannot be separate by spaces. You can have multiple class names, which a new class is separated by a space. – fanfavorite Aug 04 '11 at 19:54
  • That is proper to declare 2 classes in my code (I know this now), but the "Unrelated" comment actually helped me understand why it was like this, so thanks Rikudo! – Shane Aug 04 '11 at 20:28

1 Answers1

1

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%;
}
Community
  • 1
  • 1
fanfavorite
  • 5,128
  • 1
  • 31
  • 58
  • I will have to play around with this a little more. For some reason any attempt at this failed to work, but could be in my syntax or was the browser I was using ...back to the shop. – Shane Aug 04 '11 at 19:50
  • It is an image of my company name, so it just needs to run as header in all size screens. – Shane Aug 04 '11 at 19:53
  • 1
    I did width: 100% on your markup and it works fine. It spanned across. Adding the height: 320px made it really stretched. If you want sixteen to be 320px, you could do that and have the img just span to width: 100% – fanfavorite Aug 04 '11 at 19:55
  • Great! I actually made a syntax error and moved on to complicate something fairly simple, all I needed was the (.sixteen img) and had previously a little more code then a little less, thanks for the help. – Shane Aug 04 '11 at 20:20