Css 超过父级大小的图像

我想居中并限制图像
我有一个外部

容器

和一个

图像容器

，它有

显示：内联块与图像大小相同（必需，将包含可拖动项目）

但图像持续超过
高度：100%

是否有一个解决方法来获得所需的结果（如屏幕截图所示）


.container{
宽度：300px；
高度：100px；
背景：红色；
文本对齐：居中；
}
.image容器{
显示：内联块；
背景：#0f0；
外形：5px实心#00f；
最大宽度：100%；
最大高度：100%；
}
.主图像{
最大宽度：100%；
最大高度：100%；
}
最后，我在
图像容器上使用绝对定位将其折叠到孩子的大小。这需要父容器上的
position:relative
<代码>溢出：此处添加了隐藏的
，以修复由于图像容器
上的变换而产生的轻微偏移

.container {
  width: 300px;
  height: 100px;
  background: red;
  position: relative;
  overflow: hidden;
}

位置
、
顶部
、
左侧
和
变换
在此处设置为将
图像容器在父容器中垂直和水平居中

.image-container {
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

max width
和
max height
需要匹配父容器的宽度和高度

.main-image {
  max-width: 300px;
  max-height: 100px;
}

最后，我在
图像容器上使用绝对定位将其折叠到孩子的大小。这需要父容器上的
position:relative
<代码>溢出：此处添加了隐藏的
，以修复由于图像容器
上的变换而产生的轻微偏移

.container {
  width: 300px;
  height: 100px;
  background: red;
  position: relative;
  overflow: hidden;
}

位置
、
顶部
、
左侧
和
变换
在此处设置为将
图像容器在父容器中垂直和水平居中

.image-container {
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

max width
和
max height
需要匹配父容器的宽度和高度

.main-image {
  max-width: 300px;
  max-height: 100px;
}

您可以这样做：


.container{
宽度：300px；
高度：100px；
背景：红色；
显示器：flex；
}
.image容器{
显示器：flex；
对齐内容：居中；/*水平居中*/
背景：#0f0；
外形：5px实心#00f；
}
img{/*响应性*/
显示：块；
宽度：自动；
高度：自动；
最大宽度：100%；
最大高度：100%；
}
您可以这样做：


.container{
宽度：300px；
高度：100px；
背景：红色；
显示器：flex；
}
.image容器{
显示器：flex；
对齐内容：居中；/*水平居中*/
背景：#0f0；
外形：5px实心#00f；
}
img{/*响应性*/
显示：块；
宽度：自动；
高度：自动；
最大宽度：100%；
最大高度：100%；
}

我希望
图像容器
与图像大小相同。这是因为它将包含可拖动的元素，我必须保存它们的位置而不处理偏移量。我现在猜这是不可能的，RRY，错过了你问题中的那一条谢谢，我应该强调一下：它不是完美的，但非常接近：我可能会使用你的解决方案，并使用一些js使其动态化。请编辑您的答案，我将接受：）我希望
图像容器
与图像大小相同。这是因为它将包含可拖动的元素，我必须保存它们的位置而不处理偏移量。我现在猜这是不可能的，RRY，错过了你问题中的那一条谢谢，我应该强调一下：它不是完美的，但非常接近：我可能会使用你的解决方案，并使用一些js使其动态化。请编辑您的答案，我会接受：）这是一个设计面板，将包含一个图像和一些可拖动的项目。它应该适用于不同的屏幕大小，因此“奇怪”的场景它是一个设计面板，将包含一个图像和一些可拖动的项目。它应该适用于各种屏幕大小，因此出现了“奇怪”的情况