Css 保持圆内图像的纵横比

我正在尝试做一些基本的CSS挑战。在这种情况下，我有一个图像，我已经给了一个圆，但我不知道该怎么做，以使它保留其纵横比，不完全覆盖整个圆，并居中。这是我的密码。我想学习一种用任何分辨率的图像来实现这种效果的方法

预期效果：

img{
边界半径：50%；
宽度：300px；
高度：300px；
边框：实心1px黑色；
}
.image\u容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

---

您在

img

上使用的

CSS

应该在

.image container

上。然后，您可以为

图像

设置足够的

宽度

，使其居中且不覆盖圆，如下所示：

.image_container {
  width:300px;
  height:300px;
  border-radius:50%;
  border: solid 1px black;
  display:flex;
  justify-content:center;
  align-items:center;
}
img {
  width: 70%;
}

---

也许是那样的

*{
框大小：边框框；
}
img{
填充：30px；
位置：绝对；顶部：50%；左侧：0；
转化：translateY（-50%）；
宽度：100%；
}
.image\u容器{
边界半径：50%；
边框：实心1px黑色；
溢出：隐藏；
位置：相对位置；
宽度：300px；高度：300px；
}

---

在容器而不是图像上设置大小调整条件

img{
宽度：100%；
高度：自动；
}
.image\u容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：300px；
高度：300px；
边框：1px纯黑；
边界半径：50%；
溢出：隐藏；
填充：30px；
}

大纲

• 换行

  ---

  为了控制填充/边框，基本上你也可以像@Azametzin建议的那样缩小图像的大小，但我更喜欢使用填充。没有

  边框框

  时，填充和边框将添加到元素的尺寸中，例如，在这种情况下，图像的总宽度将变为360x360px，而

  边框框

  将保持300x300px，从而减小图像大小。

  <section class="frame">
    <figure class="logo">
      <img class="image">
    ... 
  

  position: relative;
  width: 50vw;
  height: 50vw;
  

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  

  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;