CSS 保留宽高比但填充父级 div

基本上，我有一个想要用圆圈遮盖的图像。

<div class="thumbnail-mask">
  <img class="thumbnail-pic" src="/image.jpeg">
</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%;
}

但现在的问题是高度和宽度。

如果我尝试height:100%; width:100%;纵横比发生变化。

如果高度 > 宽度，那么我想要width: 100%; height: auto;。如果宽度>高度，我想要height: 100%; width: auto。这样，圆圈就完全填满了。但这似乎不可能。我尝试过设置min-width:100%; min-height:100%但是如果不设置高度或宽度，图像就太大了。

例如小提琴 http://jsfiddle.net/rdW8N/3/

一种解决方案是使用 jquery 根据宽高比设置图像宽度和高度

$(document).ready(function () {
    $("img").each(function () {
        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = $(this).width() / $(this).height();
        $(this).data("aspect-ratio", aspectRatio);

        // Conditional statement
        if (aspectRatio > 1) {
            // Image is landscape
            $(this).css({
                height: "100%"
            });
        } else if (aspectRatio < 1) {
            // Image is portrait
            $(this).css({
                width: "100%"
            });
        }
    });
});

显然，这不像纯 CSS 方法那么优雅，但最终可能会更可靠