中心图像大于包含 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>

center image that is bigger than the containing div