Question

Okay so I want to have an image that I select through CSS to be fluid based, however, this is the problem that I run into.

This is what I think in my head I have to do, however, it doesn’t work:

#image { background-image:pic.jpg; height:100%; width:100%; }

But, you can’t have this tag use the “height:100%;”, correct? You have to set it to a pixel width. But if I want it to be fluid.. then I can’t set it to a pixel width, correct?

Is there another way to do this? Thanks.

Answer 1

If you do it this way it will be fluid:

HTML:

<img src="http://news.bbcimg.co.uk/media/images/62777000/jpg/_62777247_62777242.jpg" alt="" />

CSS:

​img {
width: 100%;
}​

http://jsfiddle.net/7hMbQ/1/

Or if you want to stretch width and height to 100% try this (but the ratio will not be correct):

http://jsfiddle.net/7hMbQ/3/