绝对位置的css3自适应图像

Question

我被困在应该非常简单的事情上。我有一个使用语义 UI 的页面。在该页面上，我有一个 200 像素宽 x 388 像素高的徽标图像。图像绝对定位，左上角。它不使用任何语义 UI 类。我希望图像自适应地缩小到屏幕尺寸。我玩过最小和最大高度和宽度，但图像根本不会改变大小。

我让它几乎工作的唯一方法是用 div 替换图像并将图像设置为背景。我进行了调整，但我无法保持纵横比，此外，这不是一个令人满意的解决方案。

这是我所拥有的一个例子；

<div class="ui inverted menu">....</div>
<img src="/img.png" class="logo">
<div class="ui page grid">.....</div>

/* css (separate file) */
.logo{
    position: absolute;
    top: 4px; 
    left: 6px; 
    z-index: 2;
    min-height: 100px;
    max-height: 388px;
    width: auto;
}

这只是我尝试过的众多变体之一，但我已经没有想法了！

Answer 1

有一个object-fit/object-position 方法可以解决您的问题。

要保持img 块的纵横比，只需使用：

object-fit: contain;

用于放置 img 左上角：

object-position: 0 0;

不要忘记将图像拉伸到 100% 的宽度和高度：

width: 100%;
height: 100%;

查看fiddle 来玩它。

请注意，此变体不是跨浏览器使用的最佳选择，因为根据caniuse，IE 6-11、Edge 和一些移动 Android 浏览器不支持object-fit/object-position 属性。

正如 Simon 之前所说，我建议您也将 background-image 用于此类情况。

Answer 2

最好的解决方案是将图像设置为background-image，然后将background-size 设置为cover。

.logo {
  background-image: url(path/to/your/image.jpg);
  background-size: cover;
}

这样，您将保持纵横比。
如果您不希望图像的某些部分被截断，可以改用background-size: contain;。