Html 最大高度-按比例拉伸-不收缩-以适合容器，是否可能？

因此，我在页面上定位了一些父容器/div。它的高度和宽度设置为100%。容器中有一个图像。我目前已经编写了一些JavaScript，以便根据图像的尺寸，将图像拉伸到容器的100%宽度或100%高度。然后将图像垂直或水平居中。同样，每次重新调整窗口大小时都会执行此操作，以便图像始终居中并适合

目前，这是非常好的工作，但。。。这不是重点。真正的问题是：有没有一种方法可以只用CSS来实现这一点？换句话说，一个元素是否有可能与它的容器成比例地拉伸，但不被剪裁/截断，而只使用CSS？另外，不是背景大小：包含。黑客也很受欢迎。谢谢

我为任何想捣乱的人摆弄了一把小提琴

编辑

---

以防万一，有人在互联网上寻找…一个可行的替代使用可以是CSS背景大小属性。浏览器兼容性和来自Mozilla开发者网络的更多信息您只需将高度和宽度指定为100%，例如：

#makeMeStretch {
    height: 100%;
    width: 100%;
    background: #FFF;
}

我更新了你的小提琴

有没有办法只用CSS就可以做到这一点？换句话说，一个元素是否有可能与它的容器成比例地拉伸，但不被剪裁/截断，而只使用CSS

如果仅将图像的高度设置为100%，而不设置宽度，则图像将与其容器成比例拉伸，而不会被剪裁或剪切。同样，仅将宽度设置为100%，而不设置高度

编辑

---

你不能只使用CSS做你想做的事情，因为你需要知道图像的纵横比是高于还是低于它的容器，CSS做不到。看一看

谢谢，但不会按比例缩放图像。为什么不按背景大小：包含？@Mike Robinson这是因为传统ie支持。ie8仍然太普遍了。听起来像是在寻找对象匹配，但只有一个浏览器支持它：可能的重复版本会起作用。。。但是，如果图像设置为“100%高度”，并且宽度超过容器，该怎么办？它会被剪掉的。也适用于“宽度100%”和“高度自动”。我可以为纵向或横向图像创建单独的类，但我想在一个CSS规则中实现这一点。在这种情况下，你应该看看这个答案：这非常清楚地解释了为什么你不能用CSS做你想做的事情。谢谢！当你有时间的时候，请更新你的问题，我会把它作为答案核对一下。我将用CSS3“背景尺寸”和“ms过滤器”链接更新我的问题，以供那些正在寻找和感兴趣的可能替代方案的人使用。