html - 如果 parent 较小，如何使图像居中？

Question

我目前正在尝试响应设计。我需要在父 div 变小的同时保持图像居中。

见图片说明:

我不想用它作为背景。下面的代码会一直把它放在div框的左上角

<div id="img_wrap">
    <img src="test.png" id="img" />
</div>

<style type="text/css">
    #img_wrap {
        overflow: hidden;
        text-align: center;
    }
</style>

Answer 1

这是一个 example

#img_wrap{
  position: relative;
  overflow: hidden;

  /* arbitrary container size */
  width: 7rem; 
  height: 16rem;
}

#img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

诀窍是图像绝对放置在中心，其父容器宽度的 50%，然后通过转换向左移动其自身宽度的 50%。