大于包含div的中心图像

Question

这就是我所拥有的：

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;
}
.thumbnail img {
    height: 600px;
     width: auto;
}

图像的宽度可以是任何大小，可能大于容器div。我如何居中？

Answer 1

尝试添加此内容

.thumbnail img {
    height: 600px;
     width: auto;
     display:block;
     margin: 0 auto;
}

Answer 2

使用Flex来解决问题，请假设图片的自由尺寸（未设置CSS）

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;  
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div style="width: 300px;">
<div class="thumbnail"><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /></div>
</div>