将 IMG 设置为其父容器的封面

Question

我想让每个 IMG 元素的行为与 background-size:cover 对背景图像的行为相同。基本上调整 IMG 的大小以完全适合其容器而不会变形。

IMG 的容器必须保持 100x100 像素。 HTML 必须保持原样。只能修改 CSS。

图片是随机的，有不同的格式：风景|纵向|正方形。

见小提琴：https://jsfiddle.net/sdf0anq4/

<div class="images">
    <a href="javascript:void(0);">
        <img src="http://crispme.com/wp-content/uploads/33110.jpg" />
    </a>
    <a href="javascript:void(0);">
        <img src="https://greatkidpix.files.wordpress.com/2010/07/teenage-portrait.jpg" />
    </a>
</div>

.images > a {
    display: inline-block;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    overflow: hidden;
}
.images > a > img {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
}

如果真的不能用 CSS 来完成，我希望看到一个简单的 jQuery 解决方案。

Answer 1

按照您的要求保留您的 HTML，只需在 CSS 中进行一些更改即可：

.images > a {
  display: inline-block;
  vertical-align:top; /* just for demo purposes */
  width: 100px;
 /*removed height and overflow */
}

.images img {
  max-width: 100%; /* changed min-width to max-width */
  width: auto; /* new */
  border-radius: 100%; /* new */
  border: 1px solid red; /* just for demo purposes */
  /*removed min-height and height */
}

你可以在下面的sn-p中看到完整的结果

.images {
    border:1px solid blue
}

.images > a {
    display: inline-block;
    vertical-align:top;
    width:100px;
}
.images img {
    max-width: 100%;
    width:auto;
    border-radius: 100%;
    border:1px solid red;
}

<div class="images">
  <a href="javascript:void(0);">
    <img src="http://crispme.com/wp-content/uploads/33110.jpg" />
  </a>
  <a href="javascript:void(0);">
    <img src="https://greatkidpix.files.wordpress.com/2010/07/teenage-portrait.jpg" />
  </a>

</div>

编辑

用 jQuery 更新答案：

$('img').each(function(){
    $(this).addClass(this.width > this.height ? 'landscape' : 'portrait');
});

.images {
    border:1px solid blue
}

.images > a {
    display: inline-block;
    vertical-align:top;
    border:1px solid green;
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius: 100%;
}
.images .portrait {
    max-width:100%;
}
.images .landscape {
    max-height:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="images">
    <a href="javascript:void(0);">
        <img src="http://crispme.com/wp-content/uploads/33110.jpg" />
    </a>
    <a href="javascript:void(0);">
        <img src="https://greatkidpix.files.wordpress.com/2010/07/teenage-portrait.jpg" />
    </a>
</div>