Question

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

目前这是非常有效的，但 ......这是重点。真正的问题是：有没有办法用只是CSS 来做到这一点？换句话说，元素是否可以按比例拉伸到它的容器中但不能被剪裁/切断并且使用JUST CSS这样做？另外，不是background-size: contain。黑客也欢迎。感谢。

我为那些想要搞砸的人设置了一个小提琴...... HERE。

修改

以防万一在互联网上有人正在寻找...
使用<img>的可行替代方案可以是CSS background-size属性。浏览器兼容性以及Mozilla开发人员网络HERE

中的更多信息

Answer 1

有没有办法用JUST CSS做到这一点？换句话说，元素是否可以按比例拉伸到它的容器但不能被剪切/切断并使用JUST CSS这样做？

如果您在不设置height的情况下将图片的100%设置为width ，它将按比例拉伸到其容器而不会被裁剪或剪切关闭。将width 仅设置为100%而不设置height相同。

修改

如果图像的宽高比高于或低于其容器，则无法使用CSS执行您想要执行的操作，CSS无法执行此操作。看看here for a more detailed explanation of the issue at hand by Stephan Muller

Answer 2

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

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

我更新了你的小提琴

max-height - 按比例拉伸 - 不收缩 - 适合容器，是否可能？

2 个答案: