Юрий Малярчук

jQuery был очень популярен раньше, из-за ie 8 и 9, потому что если бы вы писали на чистом JS, то вам пришлось бы дописывать кучу полифилов для этих браузеров. jQuery все проблемы с несовместимостью решал, поэтому было вполне логично использовать именно его для различных плагинов.
Сейчас очень многие отказываются от поддержки браузеров ниже ie 10 (да и от 10 тоже), потому можно спокойно использовать ES5, а там добавлено куча всего полезного, что спокойно может заменить jQuery, например, youmightnotneedjquery.com .
А по сути, для верстки (не фреймворков, а простых манипуляций на странице) чистый JS не так уж сложен. Посмотрите ссылку выше, там всё, что вы используете в jQuery написано на чистом JS, а то, что не понятно, легко гуглится - есть десятки бложиков, есть MDN, где вам всё разжуют и покажут на множестве примеров.

Например так https://jsfiddle.net/oshgnr30/8/

Нашел решение уже.

<script >
if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
// сюда вставляем скрипт
}
</script>

Размер блока + background-size

есть свойство object-fit, но у него плохая поддержка браузерами на данный момент.
Я в таких случаях использую фоновое изображение.
Если размеры дива известны - то тут все просто, просто задаем фон

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

а в css заданы остальные параметры фона, в том числе background-size
Если размеры дива по одному из измерений зависят от изображения, то можно оставить картинку внутри, сделав ее полностью прозрачной (div img {opacity: 0}), а с фоном провернуть ту же штуку, что в предыдущем примере.

А почему вы CSS проблемы решаете на php?
пробелы в inline-block, давно известная проблема и путей решения много, ну самый известный способ, задаем родителю word-spacing: -5px; а всем детям word-spacing: 0; И прощайте ваши пробелы

P.S. прежде чем городить костыли, разберитесь в проблеме

jsfiddle.net/f48ZD/373

jsfiddle.net/f48ZD/364