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

我想让每个IMG元素表现为背景图像的背景大小：cover行为。基本上调整IMG的大小，以完全适合其容器，而无需改变其形状

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

这些图像是随机的，有不同的格式：横向、纵向、方形

参见小提琴：

.images>a{
显示：内联块；
边界半径：100%；
高度：100px；
宽度：100px；
溢出：隐藏；
}
.images>a>img{
最小高度：100%；
最小宽度：100%；
身高：100%；
}

---

如果CSS真的不能实现，我希望看到一个简单的jQuery解决方案

按照您的要求保留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 */
}

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

.images{
边框：1px纯蓝
}
.images>a{
显示：内联块；
垂直对齐：顶部；
宽度：100px；
}
.图像img{
最大宽度：100%；
宽度：自动；
边界半径：100%；
边框：1px纯红；
}

我忘了提过应该保持正方形。谢谢您想要

a

正方形，但

img

半径为100%？请查看更新的答案，并告诉我这是否是您想要的。。我不完全理解您想要实现的目标。应该保持100x100px，以获得完美的圆形图像。

.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 */
}