我面临着一个问题，在使用CSS的较小屏幕上为图像保持圆形形状.这是我遇到的问题:
我有一个布局，我使用border—radius:50%；CSS属性以圆形显示图像.然而，当我将屏幕大小调整为较小的断点时，图像的圆形形状会扭曲，不再保持完美的圆形.
我已经try 将边界半径属性设置为50%，同时指定相同的最大宽度和最大高度值以保持纵横比.然而，这种方法在较小的屏幕上似乎并不像预期的那样起作用.
我正在寻找一个解决方案或变通办法，这将使我能够保持一个完美的圆形形状的图像跨越不同的屏幕尺寸而不失真.任何关于如何实现这一点的见解或建议将不胜感激！
目前，如果你试图调整屏幕大小，它将保持相同的大小.
提前感谢您的帮助！
Note: image size shouldn't be bigger than 8rem
.figure {
position: relative;
}
.figure img {
width: 200px;
height: 200px;
border-radius: 50%;
}<figure class="figure">
<img src="https://via.placeholder.com/400x300" alt="Placeholder Image">
</figure>