超过父母大小的图像

Question

我想要居中并限制图像 我有一个外if (isempty(centers)) % write a dummy XLS file else % write your values to XLS file end 和一个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%;
}

fiddle

Answer 1

我最终在image-container上使用绝对定位将其折叠到孩子的大小。这需要父容器上的position: relative。此处添加overflow: hidden以修复因image-container上的转换导致的轻微偏移。

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

position，top，left和transform在此处设置为将image-container垂直和水平居中放置在父容器中。

.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;
}

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>