Можно попробовать сделать контейнер с max-width: 100% и overflow: auto.
А можно попробовать, как я недавно: адаптировал сайт под мобильники, на сайте был слайдер, который при традиционной подгонке стилями некорректно начинал работать.
Почесав репу, я сел да и состряпал решение на основе css-свойства "transform: scale" и jquery. JQuery используется для удаления пустой области, размером с оригинальный элемент, после применения масштабирования.
Идея такова: делаем контейнер целевому элементу, затем устанавливаем элементу масштабирование с установкой точки отсчета в верхнем левом углу; после этого jquery вычисляем получившийся реальный размер масштабируемого элемента и устанавливаем высоту и ширину контейнеру, согласно рассчетам.
Опционально можно добавить overflow: hidden контейнеру.
Применено на czm-sochi.su
Дано: неадаптивный слайдер с анимацией.
Надо: сделать так, чтобы он адаптировался под размер экрана.
Решение: масштабировать через css со scale, обрезать пустоту вокруг через вычисление реального размера и придания их обёрткам.
Внимание: используется стоп-кран, проверяющий, применено ли свойство transform: scale к элементу. Проверяется по маске "*.**", т.е. в CSS надо указывать трансформацию с сотой долей.
<script>
//нам нужно отцентрировать слайдер главной по горизонтали. Он имеет margin auto, но из-за scale вложенного содержимого не центрируется.
//Будем явно указывать обёртке высоту и ширину, тогда margin сработает.
//выберем элемент, у кого будем брать высоту и ширину с margin'ами
var sourceElem = '#nextend-smart-slider-135';
//Выбор элемента, в котором будем ставить высоту (это вложенный в секцию див)
var targetElemHei = 'section#top-a>div';
//Выбор элемента, в котором ставим уже ширину (это секция и обёртка)
var targetElemWid = 'section#top-a';
//глобальная переменная, определяет отработал скрипт или нет
var worked = false;
//стартуем!
jQuery(document).ready(startParams);
//на ресайз вешаем обработку, в которой проверяем переменную worked.
jQuery(window).on('resize',startParams);
function startParams(){
//выполняемся, если исходный элемент для забора данных существует
//а еще стоп-кран, если transform не применяется к слайдеру, ничего не трогаем.
if (jQuery(sourceElem).length != 0 && (jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) != null && jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) != 0.00)) {
//устанавливаем переменные высоты, ширины, масштабирования
var elemHei = jQuery(sourceElem).height();
var elemWid = jQuery(sourceElem).width();
var scaleMultiplier = jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/);
jQuery(targetElemHei).height(elemHei*scaleMultiplier+47);
jQuery(targetElemWid).width(elemWid*scaleMultiplier+14);
worked = true;
} else if (worked == true){
if (jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) == null || jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) == 0.00){
jQuery(targetElemHei).attr('style', '');
jQuery(targetElemWid).attr('style', '');
}
}
}
</script>