大于包含 div 的中心图像

Question

这是我所拥有的：

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

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

Answer 1

使用 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>

Answer 2

尝试添加这个

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