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

Question

我想让每个IMG元素都表现为 background-size：cover 表现为背景图片。基本上调整IMG的大小以完全适合其容器而不会产生差异。

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

图像是随机的，具有不同的格式：landscape | portrait | square。

请参阅小提琴：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 */
}

您可以在下面的代码段中看到完整的结果

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改

使用 jQuery 更新答案：

＆＃13;

＆＃13;

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

＆＃13;

.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%
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;