center kitty? in jsFiddle?

问题

http://jsfiddle.net/TurtleWolf/P7xKm/

All I'm trying to do is center/stretch an image regardless of monitor size so it always fills up the background with the full image. No more or less than the complete horizontal of that image ... Any suggestions?

回答1:

This will fill the horizontal:

<div id=container>
    <img src="http://placekitten.com/g/200/300" style="width: 100%;"/>
</div>

Fiddle Link: http://jsfiddle.net/YSnDa/

If you also want it to stretch the vertical (wasn't clear if that's what you wanted as well, you can add the height definition too:

height: 100%;

Ideally, you should extract this out to a class to separate your HTML/CSS:

<style>
    .bg_image {
      width: 100%;
    }
</style>

And then apply the class to your image:

<img src="http://placekitten.com/g/200/300" class="bg_image" />    

回答2:

http://jsfiddle.net/P7xKm/2/

text-align:center

回答3:

If you want to make the image stretch to fill the background completely, then:

img {
    width:100%;
    height:100%;
}

should do it.

回答4:

img {
    width:cover;
}

Is what I've started using recently

来源：https://stackoverflow.com/questions/6975188/center-kitty-in-jsfiddle