Центрированное и отзывчивое изображение в CSS

Question

Спасибо за любую помощь заранее!Мне нужно, чтобы это изображение было центрировано, и в то же время высота должна уменьшаться при изменении размера окна браузера.Первое, что уже сделано с flexbox.Но, к сожалению, высота остается неизменной.Ширина изображения больше, чем область просмотра, и это преднамеренное предположение.

Пожалуйста, проверьте это здесь: https://jsfiddle.net/23nqgtz5/

html:

<div class="img-container">
 <img src="https://via.placeholder.com/1200x200" />
</div>

css:

.img-container {
  display: flex;
  justify-content: center;
}

Answer 1

Оберните ваш img в другой div и примените свойство flex: 1 1 auto;.

Дайте img max-width: 100%; и настройте ширину изображения, используя отступ .image

HTML

<div class="img-container">
  <div class="image">
    <img src="https://via.placeholder.com/1200x200" />
  </div>
</div>

Добавить ниже к CSS

.image {
    flex: 1 1 auto; 
    padding: 0 30px;
    text-align: center;
}
img {
  max-width: 100%;
}

Будьте осторожны, flex не на 100% совместим со всеми браузерами