避免拉伸图像（css，wordpress）

Question

我目前正在使用我的wordpress网站。我有主题优化器，我做了一个孩子主题。我已经对我的块小部件进行了更改，以便它们是圆形而不是方形。我的问题是块图像被拉伸。

所以我的问题是如何在不拉伸图像的情况下使图像适合圆圈？我尝试过使用max-width但它不起作用。是否可能有一个代码使图片动态，以便根据帧重新调整？

下面是三个块之一的css代码（它们几乎完全相同）。

img.allignnone.wp-image-226 {
width: 300px;
height: 300px;
border: 1px solid #DDDDDD;      
border-radius: 50% 50% 50% 50%; }

Answer 1

添加对象：封面;

    img.allignnone.wp-image-226 {
         width: 300px;
         height: 300px;
         object-fit: cover; /*HERE*/
         border: 1px solid #DDDDDD;      
         border-radius: 50% 50% 50% 50%;


}