Масштабирование фонового изображения внутри li

Question

У меня есть основной слайдер, работающий на сайте.

У меня есть красивые привет-res изображения, чтобы я мог масштабировать изображения парами сто пикселей. Любые идеи, как я мог масштабировать фоновые изображения до определенной точки? Изображения в настоящее время на 1000 пикселей на слайд, хотели бы масштабировать ширину bg как 1300px ... если браузер такой широкий ...

Открыто для CSS или js, было бы хорошо быть тождественным и совместимым и функциональным в других браузерах.

любые идеи?

Answer 1

удалить его из фона и положение изображения в качестве абсолютного

selectior-name-if-any img{ 
width:100%; 
height:auto; 

}

должен работать и в IE7.

Answer 2

Попробуйте это:

-o-background-size: width height;   
-webkit-background-size: width height; 
-khtml-background-size: width height;  
-moz-background-size: width height;  
background-size: width height; 

Демо: http://jsfiddle.net/tfazD/

Answer 3

Помимо передовой практики (изображения должны быть столь же большим, как только они отображаются), вы могли бы просто использовать свойство CSS background-size, к сожалению, это не но полностью поддерживается, поэтому вам придется отказаться от поддержки слабого IE.

Использование JS можно проверить window.innerWidth (document.documentElement.clientWidth для IE) и применить background-size -свойства, если она соответствует видовому экрану (в CSS пути будет media-queries). Для IE вам нужно будет скрыть фоновое изображение и использовать его проприетарный filter с объявлением sizingMethod='scale'.

В качестве альтернативы вы можете вводить тег через JS (если браузер не поддерживает свойство фона) (чтобы обнаружить это, вы можете использовать modernizr)) и примените к нему z-index:-9999;, поэтому он остается в фоновом режиме.

Используя JS, вы также можете установить какую-то условную ленивую технику загрузки для загрузки различных размеров изображения в зависимости от размера видового экрана пользователя (для мобильных пользователей не требуется 1300²px). Отбрасывая поддержку для IE8 и ранее, вы также можете использовать медиа-запросы CSS в упомянутые выше, чтобы загрузить различные фоновые-изображения (или использовать что-то вроде respond.js эмулировать медиа запросов для IE)