图片超出父尺寸

Question

我想居中和限制图像
我有一个外部 container 和一个 image-container，其中 display: inline-block; 与图像具有相同的大小（必需，将包含可拖动的项目）
但是图片一直超过height: 100%;
是否有解决方法来获得所需的结果（如屏幕截图所示）

.container {
  width: 300px;
  height: 100px;
  background: red;
  text-align: center;
}

.image-container { 
  display: inline-block;
  background: #0f0;
  outline: 5px solid #00f;
  max-width: 100%;
  max-height: 100%;
  
}

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

<div class="container">
  <div class="image-container">
    <img class="main-image" src="http://via.placeholder.com/400x400" />
  </div>
</div>

fiddle

Answer 1

我最终在 image-container 上使用绝对定位将其折叠到 child 的大小。这需要 parent 容器上的 position: relative。 overflow: hidden 在此处添加以修复由于 image-container.

上的变换造成的轻微偏移

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

position、top、left 和 transform 设置为 image-container 在 parent 中垂直和水平居中容器。

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

max-width 和 max-height 需要匹配 parent 容器的宽度和高度。

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

fiddle

Answer 2

你可以这样做：

.container {
  width: 300px;
  height: 100px;
  background: red;
  display: flex;
}

.image-container { 
  display: flex;
  justify-content: center; /* horizontal centering */
  background: #0f0;
  outline: 5px solid #00f;
}

img { /* responsiveness */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div class="image-container">
    <img class="main-image" src="http://via.placeholder.com/400x400">
  </div>
</div>

图片超出父尺寸

Image exceeding parent size

css

height

image