Css 缩放背景和最小大小

您好，我有1200 x 1200的大背景图像，我想做的是在用户调整浏览器大小时展开图像，但对其进行约束，以便它们的缩放比例永远不会小于原始大小

---

那里有很多可伸缩的bg图像，但我找不到一个可以这样做的，任何帮助都将不胜感激。

您似乎在寻找CSS3的财产。如果知道图像为1200x1200，则可以将最小大小约束到容器

不过，我不相信它能在IE上工作，所以它可能不是您的选择。

---

在这种情况下，我建议您看一看以下CSS+Javascript+JQuery组合对我很有效

感谢ANeves提供的上述答案，这是很有帮助的

CSS: Javascript（JQuery）：

jQuery（函数（$）
{//准备好了吗
$（窗口）。调整大小（函数（事件）
{
var minwidth=1200；
var minheight=1024；
变量body=$（'body'）；
var bodywidth=bodye.width（）；
if（车身宽度<最小宽度）
{//保持最小大小
博迪
.css（'backgroundSize'，minwidth+'px'+''+minheight+'px'）
;
}
其他的
{//展开
博迪
.css（'backgroundSize'，'100%自动'）
;
}
});
});

另一种可能是使用媒体查询。将图像大小设置为..1280x450，然后使用背景大小为100%自动的媒体查询；适用于宽度超过1280px的所有窗口

有一些代码也可以用IE处理图像大小调整，但是我承认我在这方面的成功有限

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;

如果有人对以上内容有任何附加或修复，请随时提供

---

希望这对其他人有所帮助…

对于背景图像，我通常为html标记设置最小宽度，该宽度等于或小于图像的原始宽度，这样可以防止图像收缩过大

background-size: cover;

---

好了

将图像放入div中，并为其指定大小。 将以下属性应用于img标记

background-repeat: no-repeat;
background-size: 100% 100%; 

---

太简单了！非常感谢。OP要求提供一种解决方案，背景图像“永远不会比原始尺寸小。”不会“覆盖”放大或缩小到填充整个屏幕的最小高度/宽度，而不仅仅是从100%放大？@mattsoave:With

background attachment:fixed它的作物。
background-size: cover;

background-repeat: no-repeat;
background-size: 100% 100%;