缩放浏览器时全屏背景图片的最小尺寸

Question

I am currently trying to modify a wordpress theme that has a full screen image as the homepage. Right now it scales perfectly fine with the browser, the only problem is it doesn't go smaller then the original image size. It will go larger and keep its aspect ratio but when you size down the window it doesn't go smaller then the default image size.

Here is the CSS in the theme for this part:

/* full screen slides */
.slides.full {
  position: absolute;
  top: 0;
  left: 0;
  background: #373432;
  width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.slides.full img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}

I used another way that made the image go smaller then its original size but it didn't stick to the height of the browser there was just a grey background underneath.

Is someone able to help me change the css I posted to do what I am trying to achieve? It would be much appreciated! Thanks.

Answer 1

Have you tried adding max-widht: 100% and max-height: 100% as well to .slides.full img ?

It's just a wild guess. It'd be helpful to see a live example.

Answer 2

this will keep the right proportion for the img

   .slides.full img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

and changing to height:100% will stretch the img when resized

Answer 3

 .slides.full img {
  max-width:100%; /* lower virsion of IE won't work width max-width */
  width:100%;         /* for IE */
}