Заполните div с изображением (вопрос подгонки объекта)

Question

У меня есть изображения, которые динамически вытягиваются и не могут быть уверены в размере изображения или соотношении изображения.

Используя bootstrap4 (и wordpress), я пытаюсь масштабировать изображение так, чтобы оно заполняло ширинуи высоту элемента div, и, если возможно, сохраняйте соотношение сторон (это нормально, если изображение обрезается по частям).

Мое изображение в настоящее время нарушает высоту элемента div, и изображение будет иметь размер вне элемента div.

.blog-home {
  max-width: 570px;
  max-height: 225px;
}

.blog-home img {
  object-fit: cover;
  max-height: 210px;
}

img {
  max-width: 100%;
  height: auto;
}

<div class="row article">
  <div class="col-md-6 blog-home">
    <picture width="778" height="312" class="attachment-large size-large wp-post-image">
      <source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
      <img src="..." sizes="(max-width: 778px) 100vw, 778px">
    </picture>
  </div>
  <div class="col-md-6">
    ....
  </div>
</div>

Мои теги динамически заменяются тегами. Я не могу разобраться, как это исправить, не нарушая отзывчивость макета.

Answer 1

Используйте Cover , чтобы изменить размер фонового изображения, чтобы покрыть весь контейнер.

Вот пример ссылки: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Answer 2

Лучшим решением было бы вырезать или обрезать изображения где-нибудь в WordPress, вот хорошее прочтение о том, почему и как это может быть достигнуто. Если ваши изображения уже находятся в библиотеке мультимедиа - используйте плагин Regenerate Thumbnails, чтобы исправить все их одним щелчком мыши.

Я думаю, что в этом деле задействовано много стилей, так что это не такЛегко узнать, какая именно часть разбивает вывод без проверки полного источника, однако в худшем случае вы можете добавить .blog-home {overflow:hidden}, чтобы вырезать все, что выходит за пределы div.

Answer 3

Тогда я бы предложил использовать background-size: cover. Вот определение в соответствии с https://www.w3schools.com/cssref/css3_pr_background-size.asp.

Изменение размера фонового изображения, чтобы охватить весь контейнер, даже если оно должно растянуть изображение или немного срезать один из краев