Question

我坚持应该非常简单的事情。我有一个使用语义UI的页面。在那个页面上，我有一个200px宽，388px高的徽标图像。图像位于绝对左上方。它不使用任何语义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

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

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

这样，你就可以保持宽高比如果您不希望剪切部分图像，可以使用background-size: contain;代替。

Answer 2

您的问题有一种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来处理此类案件。

绝对位置的css3自适应图像

2 个答案: