如何将全屏应用于图像

Question

This Gumby's example site : http://tiltingpoint.com/#/

can control top red image when we change browser width and height.

I think it is done by the "full-screen" in the article tag.

<article id="panel-1" 
         class="panel" 
         full-screen="" 
         style="background-image:url("http://tiltingpoint.com/images/backgrounds/bg_panel_1.jpg");>

When we changed browwer height, this source was added height style. I understood it.

But I can't understand any more how does it work and can't find specific description.

Please tell me how to change image keep aspect according to changing browser width and height.

Answer 1

its handy, try this :

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

and this will also work on IE9

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}

Answer 2

The only thing I can say is try adding this your css. This should make the image expand the full size of its container or parent element.

panel-1 {
   width: 100%;
   height: 100%;
}

If that does not work you can do the same

panel-1 {
  max-height: 100%;
  max-width: 100%;

These will work based on the size of the parent element. If you are trying to have it as a BG image I would try inserting into the html element or body element so it is not limited by a parent element that is small.