图像悬停在不同窗口大小上更改形状

Question

响应中的悬停形状有问题

我有这段代码：

.thumb {
  max-height: 21.875em; /* 350px */ 
  max-width: 21.875em; /* 350px */ 
  width: 100% !important; 
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.mask-thumb {
  height: 21.875em; /* 350px */
}

如果不更改浏览器大小，则悬停图像的大小与图像大小相同。 试图在css媒体屏幕中设置不同的边界百分比，但仍然不像背景图像那样悬停