Адаптивные изображения с фиксированной высотой CSS

Question

Я хочу разместить изображение в элементе div, который имеет фиксированную высоту, и изображение должно увеличиться до 100%, не мешая соотношению сторон, а также хочу, чтобы изображение было отзывчивым.Я пробовал это,

img{
    height:500px;
    width:100%;
  }

Это портит соотношение сторон.Как я могу это исправить?

Answer 1

Вы можете установить ширину и высоту, используя VW (ширина просмотра), это означает, что ваше изображение будет иметь ширину и высоту в зависимости от ширины экрана

img {height: 50vw;ширина: 100vw;}

в этом примере ваше изображение будет иметь ширину 100% и высоту 50% в зависимости от ширины

Answer 2

Вы можете сделать это с помощью CSS object-fit:

img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

Или contain зависит от ваших потребностей.