Bootstrap рекомендуемая широкая карта

Question

Любая идея, как я могу исправить карту выше, используя Bootstrap4? Я пытаюсь сделать изображение идеально масштабированным до карты фиксированной высоты. Сейчас он явно растянут, и я выясняю, есть ли способ сделать его лучше.

Codepen: https://codepen.io/Niciabob/pen/LYVGyGV

.img__featured {
  height: 400px;
}

Answer 1

Bootstrap 4 не предоставляет классов для этого. Для этого вы можете использовать свойства object-fit и object-position, такие как object-fit: cover.

. См. Эту статью для получения дополнительной информации о object-fit и object-position: https://css-tricks.com/on-object-fit-and-object-position/

Answer 2

Вы можете попробовать установить изображение в качестве фона .image_featured и установить его на покрытие следующим образом:

.img__featured {
  background-image: url("https://www.theproche.com/wp-content/uploads/2019/07/neuromarketing.jpg");
  background-size:contain;
  background-size:100%;
  height: 700px;
}

, но этот метод не подходит для SEO и не рекомендуется.