2

Фоновые картинки в div подгружаются динамически

Как сжать фоновое изображение если оно больше родительского объекта, но не растягивать его если меньше?

div {
  background: url('/img.png') no-repeat center center;
  background-size: contain;
  height: 100%;
  width: 100%;
}

P.S.: background-size: contain; растягивает маленькие изображения, а этого требуется избежать.

1
  • По-моему можно сделать размер родительского блока по содержимому. Вот только тег не помню.
    – user208501
    19 апр 2016 в 9:40

2 ответа 2

4

Чистым CSS это не делается.

Если вы говорите, что изображения подгружаются динамически, значит, есть какой-то javascript, который это делает. Так, после загрузки изображения, можно проверить его размер, сопоставить с размером блока, и поменять background-size. При этом, если размер блока может меняться со временем, имеет смысл пересчитывать background-size при изменении размеров (как правило, достаточно подписаться на событие window.resize).

Впрочем, если таких блоков много, вышеописанный подход будет вызывать лаги. Кроме того, в некоторых браузерах для background-image не поддерживается anti aliasing, что приводит к заметному ухудшению качества картинки при масштабировании.

Возможно, вам стоит использовать <canvas> или <svg> вместо того, чтобы динамически менять фон?

Так же можно придумать такую конструкцию: основному <div> не задавать фон. Вместо этого поместить внутрь еще один <div> или <img> с абсолютным позиционированием и max-width, и задать фон ему. Тут, правда, начнутся проблемы с вертикальным выравниванием, да и вообще это не очень хорошее решение: html код потеряет в читаемости. Впрочем, работать будет быстрее, чем подписка на события, так как меньше программных манипуляций с DOM.

1

В background-size можно использовать calc.

.bg
{
    background-size: calc(min(500px, 100%));
}

Надо заметить, что calc можно использовать и по одной, и по обеим сторонам. Тоже-самое работает для свойства background-position

1
  • Храни вас гасподь! :) сто раз слышал про мин, и пропускал мимо ушей.
    – user347472
    5 апр 2020 в 11:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.