Question

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

<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%;，会改变宽高比。

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

Answer 1

Fiddle For Example

一种解决方案是使用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方法来说并不是那么优雅，但最终可能会更可靠

Answer 2

display:inline-block;中的

.thumbnail-mask应该将<img>包裹在其中

CSS保留纵横比但填充父div

2 个答案: