Сделайте изображение внутри div, используя фоновое изображение в CSS

Question

Как сделать так, чтобы фоновое изображение поместилось в div с указанными размерами c. Я пробовал со свойством object-fit, но безуспешно. Может ли кто-нибудь помочь?

.image {
  width: 100px;
  height: 50px;
  border: 1px solid red;
  background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y");
}

<div class="image"></div>

Answer 1

Вы можете сделать это несколькими способами и выбрать то, что вам больше всего подходит.

Используя размер фона

Вы можете background-size: contain; таким образом растянуть изображение без обрезка, а также соотношение сторон, чтобы соответствовать вашему изображению, используя background-url

Также используйте background-repeat: no-repeat;, чтобы отображать ваше изображение только один раз в контейнере.

Подробнее о background-size здесь

Запустите сниппет, чтобы убедиться, что он работает.

.image {
  width: 100px;
  height: 50px;
  border: 1px solid red;
 background-size: contain;
  background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y");
}

<div class="image"></div>

Использование размера фона с высотой и шириной

Вы можете установить максимальное height и width изображения на 100%

.image {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-size: 100% 100%;
  background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y");
}

<div class="image"></div>

Answer 2

См. Свойство background-size https://www.w3schools.com/cssref/css3_pr_background-size.asp

div.image {
       background-image: url('https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y');
        background-repeat:no-repeat;
        background-size:contain;
        height: 50px;
        width: 100px;
        border: 1px solid red;
    }

<div class="image"></div>