Чистым CSS это не делается.
Если вы говорите, что изображения подгружаются динамически, значит, есть какой-то javascript, который это делает. Так, после загрузки изображения, можно проверить его размер, сопоставить с размером блока, и поменять background-size
. При этом, если размер блока может меняться со временем, имеет смысл пересчитывать background-size
при изменении размеров (как правило, достаточно подписаться на событие window.resize
).
Впрочем, если таких блоков много, вышеописанный подход будет вызывать лаги. Кроме того, в некоторых браузерах для background-image
не поддерживается anti aliasing, что приводит к заметному ухудшению качества картинки при масштабировании.
Возможно, вам стоит использовать <canvas>
или <svg>
вместо того, чтобы динамически менять фон?
Так же можно придумать такую конструкцию: основному <div>
не задавать фон. Вместо этого поместить внутрь еще один <div>
или <img>
с абсолютным позиционированием и max-width
, и задать фон ему. Тут, правда, начнутся проблемы с вертикальным выравниванием, да и вообще это не очень хорошее решение: html код потеряет в читаемости. Впрочем, работать будет быстрее, чем подписка на события, так как меньше программных манипуляций с DOM.