Изменить размер div в соответствии с размером фонового изображения - PullRequest
Новая
       24

Изменить размер div в соответствии с размером фонового изображения

0 голосов
/ 31 мая 2019

У меня есть div, который загружает фоновое изображение. Высота этого div не может превышать 60px, но ширина может быть увеличена до любого числа в зависимости от ширины изображения.

Я хочу, чтобы все загружаемые изображения имели исходные размеры без размытия. Фактически, мой div должен изменить размер в соответствии с размером изображения, но не должен превышать 60px.

В настоящее время у меня есть этот CSS для div. Использование background-size: содержит очень хорошо для изображений с высотой более 60 пикселей, но когда изображение меньше, оно растягивает изображение и размер фона: авто работает хорошо для небольших изображений, но большие изображения расширяются из div. 

.div{
  background-image: url("../assets/images/example.gif");
  background-size: contain;
  background-repeat: no-repeat;
  height: 60px!important;
  width: 500px!important;
}

Я ищу какой-нибудь css, который будет показывать оригинальное изображение каждый раз с высотой div, равной 60px

Спасибо

1 Ответ

1 голос
/ 31 мая 2019

backgroundImage не определяет размер элемента.Это не так, как backgroundImage был разработан.

Содержимое элемента или любые заданные атрибуты делают.Поэтому вы можете с помощью JavaScript создать тег <img> с тем же источником, что и backgroundImage.В его событии onload получите размер изображения и установите значение width для div этого значения.

Вдоль этих строк: 

const toResize = document.querySelectorAll('.bg-resize');
[...toResize].forEach(elem => {
  const img = document.createElement('img');
  img.src = elem.style.backgroundImage.slice(4, -1).replace(/"/g, "");
  img.onload = event => {
    elem.style.width = `${event.path[0].width}px`;
  };
})
.bg-resize {
  height: 60px;
  margin: 0 auto;
  background: transparent no-repeat center /cover;
}
<div class="bg-resize" style="background-image: url(https://via.placeholder.com/150)"></div>
<div class="bg-resize" style="background-image: url(https://via.placeholder.com/600x60)"></div>
<div class="bg-resize" style="background-image: url(https://via.placeholder.com/300x200)"></div>

Обратите внимание, что на самом деле вам не нужно добавлять элементы <img>.Они загружаются, как только вы их создаете.

...