我可以将图片扩展为适合HTML部分的边界吗？

Question

I have the following HTML:

<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
   <div id="login-image"></div>
</section>

and this CSS:

#infopic {
   background-image: url("/Images/login.png");
}

I have a few different ways to make my image stretch to fit the boundaries of the #infopic but still cannot get this to work right. Right now it repeats in the code above the image (which is smaller than 500px square) just repeats.

Answer 1

try adding background-size property.

Some examples: http://www.css3.info/preview/background-size/

Answer 2

You could try the background-size declaration:

background-size: 100% 100%;

This will work in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. I don't think it can be done in older browsers. Perhaps:

#infopic {
    background-image: url("/Images/login.png") 50% 50% no-repeat;
    background-size: 100% 100%;
}

for backwards compatibility?

Answer 3

You can use the CSS3 property background-size: 100%; to stretch your image over the entire element:

#infopic {
  height: 500px;
  width: 1000px;
  background-image: url("http://placehold.it/250x250");
  background-repeat: no-repeat;
  background-size: 100%;
}

This is a CSS3 property so it's not supported in older browsers (I'm not even sure of IE support) but it's useful for modern browsers.

As an additional note, mixing external and inline CSS is a terrible idea, that's why I moved the height declaration to the external CSS.

:)

http://jsfiddle.net/x4w7V/

Answer 4

Use like this:

img {
  background-size: 100%;
  max-width: 100%;
}

Reference:

Fliud Images