html填充div更丰满,html – CSS保留纵横比但填充父div

基本上,我有一个我想用圆圈掩盖的图像.

CSS(我使用LESS)非常简单：

.thumbnail-mask {

width: @circleSize;

height: @circleSize;

border-radius: @circleSize/2;

-webkit-border-radius: @circleSize/2;

-moz-border-radius: @circleSize/2;

overflow: hidden;

}

我已经想出如何在垂直和水平方向上将图像置于父级中心

.thumbnail-pic {

text-align: center;

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

// width: 100%;

// height: auto;

height:auto;

width: 100%;

}

但现在问题是身高和宽度.

如果我尝试身高：100％;宽度：100％;宽高比改变了.

如果高度>宽度,然后我要宽度：100％;身高：自动;如果宽度>身高,我想身高：100％;宽度：自动.这样,圆圈就完全填满了.但这似乎不可能.我试过设置最小宽度：100％; min-height：100％但是没有设置高度或宽度,图像太大了.