Вставка картинки в div

Я использую этот трюк и работает очень хорошо для меня:

<div class="card" style="background-image: url(...)"></div>

И CSS:

.card {
   background-size: cover;
   height: 400px;
   width: 600px;
}

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

Хорошо, я исправил проблему. Я присвоил класс div.

<div class="fill">
  <img src="...">
</div>

и в css.

.fill {
  max-width: 70%;
  height: 100%;
}

.fill img {
  width: inherit;
  height: inherit;
}

Вот подход с object-fit.

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

Содержать: сохраняет соотношение сторон, но может увеличивать или уменьшать размер изображения. Низкое масштабирование может быть искажено.

Обложка: сохраняет пропорции изображения и помещается в родительский контейнер, но, скорее всего, обрезает изображение.

.img-container {
  height: 300px;
  width: 400px;
  background-color: yellow;
}

.cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.contain {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.fill {
  object-fit: fill;
  height: 100%;
  width: 100%;
}

<h1>Cover</h1>

<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" />
</div>

<h1>Contain</h1>
<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" />
</div>

<h1>Fill</h1>
<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" />
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Я догадываюсь, что вы хотите, я также видел сообщение, где вы ответили на свой вопрос. Вот еще одно возможное решение. Вы можете поиграть с ним и установить контейнеры width и height с разными значениями. Я использовал две картинки. Один с height>width, а другой с height<width. вот также скрипка

.img-container {
  border: 2px dashed #f00;
  line-height: 0;
  text-align: center;
}
.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

<div class="img-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho">
</div>
<div class="img-container">
  <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />

Вы можете попробовать оба этих варианта:

.card-image {
    background: url(...);
    background-size: cover;
}

Два замечания: - около 7% браузеров не поддерживают покрытие; - использование «фиксированного» с фоном может вызвать непредсказуемые проблемы; - вы также можете попробовать background-size: contains и посмотреть, даст ли это вам лучшие результаты.

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

.card-container {
    position: relative;
}

.card-image {
    padding-bottom: 56.25%; //for 16:9 ratio
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
 }