Html 如何将较大的图像填充到较小的div中？

我想把1/3大的图像放到一个小的div中，矩形居中，但我不知道如何填充

以下是一个例子：

HTML:

---

我只想将橙色矩形的上1/3放入外部div，而矩形的其余部分则隐藏起来。在我的示例中，我将背景颜色设置为outer div，以便于识别

仅移除

位置：绝对在img类中

更新css

img{
  z-index : -1;
  margin-left : -25%;
}

现场演示

下面的代码片段示例


*{
保证金：0；
填充：0；
}
身体{
背景颜色：灰色；
}
.外部{
宽度：200px；
高度：200px；
溢出：隐藏；
边界半径：50%；
背景色：黑色；
保证金：自动；
}
img{
z指数：-1；
左边缘：-25%；
}


*{
  margin : 0;
  padding : 0;
}
body{
  background-color: grey;
}
.outer{
  width : 200px;
  height : 200px;
  overflow : hidden;
  border-radius : 50%;
  background-color : black;
  margin : auto;
}
img{
  position:absolute;
  z-index : -1;
  margin-left : -25%;
}

img{
  z-index : -1;
  margin-left : -25%;
}