Question

我几乎没有用户的缩略图，他们的图像可以是纵向或宽。

我希望缩略图在不丢失宽高比的情况下成为一个圆圈。

所以我为每个图像创建了一个容器：

<div class='container'>
  <img src='' ... />
</div>

用这个css：

.container {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  width: 50px;
  height: 50px;

  img {
    width: inherit;
  }
}

它可以与肖像图像一起使用，因为图像宽度是从容器继承的。

现在的问题是使相同的图像适应宽图像...我应该用width替换height以便按预期工作。

我的解决方案有更好的解决方案吗？

或者有一种方法可以实现Less？

Answer 1

您应该取消设置width / height并将max-width / max-height设置为100%。

img {
    max-width: 100%;
    max-height: 100%;
}

这只会降低图像的尺寸，而不是高档。

Answer 2

width: fit-content; height: fit-content;

Answer 3

.container{
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
  overflow: hidden;
}

.container > img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class='container'>
  <img src='http://searchengineland.com/figz/wp-content/seloads/2015/12/duckduckgo-logo-wordmark4-1920.png' alt='duck power'>
</div>

css less - 是否可以检查元素大小？

3 个答案: