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

我目前正在尝试修改具有全屏图像作为主页的wordpress主题。现在它可以很好地与浏览器一起缩放，唯一的问题是它不会小于原始图片的大小。它会变大并保持其纵横比，但是当您缩小窗口大小时，它不会变小，然后是默认图像大小。缩放浏览器时全屏背景图像的最小尺寸

下面是这部分的主题CSS：

/* 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; 
}

我用另一种方式进行的画面去小那么它的原始大小，但它并没有坚持到浏览器的高度有只是下面的灰色背景。

有人能帮我改变我发布的CSS来做我想要实现的目标吗？这将非常感谢！谢谢。

来源

2013-03-01 user2118155

最小高度时：100％的萎缩防止 - 刚刚成立高度 - 100％或自动 – MimiEAM 2013-03-01 01:24:41

我只是试过这个，它确实做了我的想法，但是当我拉动浏览器的宽度时，会缩小图像的比例，但图像下方会出现一个空的灰色区域，并填充底部浏览器越来越小，喜欢它不会坚持到底部，它只是缩小到角落里。 – user2118155 2013-03-01 01:35:57

那你究竟想要什么？以不变的比例收缩？ – MimiEAM 2013-03-01 01:39:36

您是否尝试过将max-widht: 100%和max-height: 100%以及.slides.full img？

这只是一个疯狂的猜测。看到一个现场示例会很有帮助。

来源

2013-03-01 01:20:23 Juanjo

感谢您的回复！是的，我确实尝试过，不幸的是它没有改变任何东西。这里是一个基本主题的例子：http://themeforest.net/item/anthe-wordpress/full_screen_preview/4070793这是我想如何扩展背景：http://saltsurf.com – user2118155 2013-03-01 01:24:34

那么，在第二个一个背景用Javascript进行缩放。我猜你可以用'calc'在CSS中尝试类似的东西，但这不适用于所有浏览器。你也可以尝试将图像放在CSS背景中，而不是'img'，现在可以使用'background-size：cover'，对IE6-8有更好的浏览器支持（比calc更好）和jQuery填充 – Juanjo 2013-03-01 01:41:51

这将保持正确的比例为IMG

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

并改变height:100%将拉伸IMG调整

来源

2013-03-01 01:41:31 MimiEAM

再次感谢您的回复！当我尝试这种方式时，它会缩小比例，但当我放大时，它的大小不会超过其默认大小，并且只有灰色的背景。 – user2118155 2013-03-01 01:48:10

等你缩小你想要一个挤压的背景，并在规模上你想要一个合适的？ – MimiEAM 2013-03-01 01:56:04

这里是我想如何扩展的一个例子：http：//saltsurf.com – user2118155 2013-03-01 02:00:20

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

来源

2013-03-01 07:17:14 jhunlio

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

回答

相关问题