центральное изображение, которое больше, чем содержащий div

Question

вот что у меня есть:

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

ширина изображения может быть любого размера, может быть больше, чем размер контейнера. как мне это отцентрировать?

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