1

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

目前这工作得很好，但是......这不是重点。真正的问题是：有没有办法只用 CSS做到这一点？换句话说，一个元素是否有可能与其容器成比例地拉伸，但不能被剪裁/截断，并且只使用 CSS 来做到这一点？另外，不是background-size: contain。黑客也很受欢迎。谢谢。

我为任何想乱七八糟的人设置了一个小提琴......这里。

编辑

以防万一有人在互联网上寻找...
一个可行的替代方法是<img>可以是 CSSbackground-size属性。浏览器兼容性和来自 Mozilla 开发者网络的更多信息这里

4

2 回答 2

1

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

如果您将height图像的 设置为100% only而不设置width，它将与其容器成比例地拉伸而不会被剪裁或切断。将width only设置为100%而不设置height.

编辑

你不能只使用 CSS 来做你想做的事情，因为你需要知道图像的纵横比是高于还是低于其容器，CSS 不能做到这一点。在这里查看Stephan Muller 对手头问题的更详细解释

于 2013-05-07T03:37:51.740 回答
-1

您只需将高度和宽度指定为 100%，例如：

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

我更新了你的小提琴

于 2013-05-07T03:37:43.973 回答